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

Question

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

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

目前，只要用户点击网站上的“进程”按钮，就会执行以下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请求，在收到每个响应时更新Web页面。
• 如果您事先不知道客户端，您将拥有多少个循环，然后使用单个请求并让服务器在第一个循环完成后立即发送响应，同时还有一个标志，指示是否还有更多循环与否 - 如果有更多循环，客户端可以查看此标志并创建新的Ajax请求。