准备好中间地块后立即更新网站

Question

根据在网站上做出的选择，图表在运行 Flask 的服务器上生成。

我遇到的问题是生成例如10 个不同的地块最多可能需要 30 秒。我想实现的是在第一个图准备好后立即开始更新网站，然后在其他图准备好后自动加载。

目前，只要用户点击网站上的 "process" 按钮，就会执行以下 AJAX 函数：

    $.ajax({
        type: "POST",
        url: "/single",
        data: { athleteName1: $('#athleteName1').val(), style: $('#style').val()},
        success: function (results) {
            $('#results').empty().append(results);
            $('#results').show();
            $('#submitbutton').prop('disabled', false);
        },
        error: function (error) {
            console.log(error);
        }
    });

在服务器站点上，绘图被创建并嵌入到 div 容器中。随后将它们连接起来并立即返回到网站 "diagStr":

@app.route('/single', methods=['POST', 'GET'])
def single():
    loop 10 times:
        diagStr += generate_plot()
    return Markup(diagStr)

用 "Streaming Contents" 做这件事只能是解决方案的一部分，因为 AJAX 会等到收到整个响应。

知道今天的技术是如何解决这个问题的吗？

Answer 1

您可以通过多种方式实现这一点，但举一些简单的例子：

在客户端进行循环，生成 10 个单独的 Ajax 请求，在收到每个响应时更新网页。
如果您事先不知道客户端将有多少个循环，则使用单个请求并让服务器在第一个循环完成后立即发送响应以及标志指示是否有更多循环 - 如果有更多循环，客户端可以查看此标志并创建新的 Ajax 请求。

准备好中间地块后立即更新网站

Updating website as soon as intermediate plots are ready

ajax

flask

streaming