ajax - 准备好中间图后立即更新网站
问题描述
根据在网站上进行的选择,在运行 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)
使用“流式传输内容”执行此操作只能是解决方案的一部分,因为 AJAX 会等待收到整个响应。
知道如何用当今的技术解决这个问题吗?
解决方案
有多种方法可以实现这一点,但有一些简单的例子:
- 在客户端进行循环,并生成 10 个单独的 Ajax 请求,在收到每个响应时更新网页。
- 如果您在客户端事先不知道您将有多少个循环,则使用单个请求并让服务器在第一个循环完成后立即发送响应,以及指示是否有更多循环的标志是否循环 - 如果有更多循环,客户端可以查看此标志并创建一个新的 Ajax 请求。
推荐阅读
- git - .gitignore 没有看到 /.idea 文件夹但看到 .idea
- javascript - 如何在 jquery 中创建交换函数
- database - 在多个 AWS EC2 实例之间共享的持续更新数据库
- windows - 如何在 Jenkins 中加密 WINdows 密码并将其传递给 Ansible 作业?
- java - Spring Data JPA 无限递归
- javascript - 如何使用 JQuery 删除“onclick”,以便以后可以再次添加?
- matplotlib - Pyplot:如何添加对应于第一个 x 轴的 y 值的第二个 x 轴?
- node.js - 生产中的 Angular 7 形式
- c++ - 如何通过在 ascii 表中获取该字符的值来获取字符?
- twilio - Twilio 函数结束运行时