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

lumengabc

已于 2024-03-26 17:23:20 修改

阅读量667

点赞数 1

CC 4.0 BY-SA版权

文章标签： python jquery

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

本文链接：https://blog.youkuaiyun.com/webnoties/article/details/137020888

本文展示了如何在前端使用jQuery、Vue框架以及PythonFlask后端创建一个实时流式数据的例子，包括HTML结构、JavaScript代码片段和后端处理GET请求以发送动态数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端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 }) => {

最低0.47元/天解锁文章