AJAX - 显示与用户的连接的当前状态[关闭]答案

【问题标题】：AJAX - Displaying current status of the connection to users [closed]AJAX - 显示与用户的连接的当前状态[关闭]
【发布时间】：2018-09-24 13:49:41
【问题描述】：

我需要从许多数据源中提取数据 - 这是一个耗时的过程。如果用户发送表单，程序会从 7 个表中提取数据（使用 ajax）

我想提供一个实际发生的信息，例如“从 table1 中提取数据”、“从 table2 中提取数据”等等。

但不知道该怎么做 - 这种任务有没有好的标准？我使用 python/django 作为后端

提前致谢

【问题讨论】：

将 7 个调用中的每一个都包装到它们自己的函数中，并创建一个 Promise 链。让每个链的一部分设置一个状态变量，然后显示给用户。 Intro to promises...
感谢@Ryan C。我知道承诺，但在这种情况下，我需要运行 7 个单独的连接。如果有很多用户可能会导致问题对吗？
@JsTest 好吧，您一次只能运行一个连接。所以在你的链的最后，是的，会有 7 个电话。但在链中，您一次只能激活一个连接。

标签： javascript python jquery ajax django

【解决方案1】：

您可以使用XHR onprogress function 在 JavaScript 中流式传输数据。每当从服务器刷新数据时，都会定期调用该函数。因此，只要您想显示当前状态，请在 Python 中使用sys.stdout.flush() 强制刷新。

test.py

import sys
import time

for x in range(5):
    print(x)
    sys.stdout.flush()
    time.sleep(1)

test.html

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<button id="btn">Begin Stream</button>
<div id="app"></div>

<script>
    $(function() {
        $("#btn").on("click", () => {

            $.ajax('test.py', {
                xhrFields: {
                    onprogress: (e) => {
                        $("#app").html(e.currentTarget.response);
                    }
                }
            })
            .done((data) => {
                $("#app").html(`DONE: ${data}`);
            })
            .fail((data) => {
                $("#app").html(`ERROR: ${data}`);
            });
        });
    });
</script>

【讨论】：