Flask流输出stream和前端jquery逐行输出代码示例html通用的路由vue源码

原创

已于 2024-03-26 17:23:20 修改 · 723 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#python #jquery

于 2024-03-25 17:45:22 首次发布

前端jquery代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Streaming Response Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <textarea id="output" rows="10" cols="50"></textarea>
    <input type="number" id="quantity" min="1" placeholder="Enter quantity">
    <button id="submit">Submit</button>

    <script>
        $(document).ready(function() {
            var output = $('#output');
            var quantityInput = $('#quantity');
            var submitButton = $('#submit');

            submitButton.on('click', function() {
                var quantity = parseInt(quantityInput.val());

                if (isNaN(quantity) || quantity <= 0) {
                    alert("Please enter a valid quantity.");
                    return;
                }

                fetch('/stream_data?quantity=' + quantity)
                    .then(response => {
                        const reader = response.body.getReader();
                        return new ReadableStream({
                            start(controller) {
                                function push() {
                                    reader.read().then(({ done, value }) => {
                                        if (done) {