在烧瓶中执行后台操作时，如何显示加载消息

Question

我有以下情况：

index.html文件：

<div class="col-xl-3 col-md-6">
<div class="card bg-primary text-white mb-4">
<div class="card-body">Prima alimentazione</div>
<div class="card-footer d-flex align-items-center justify-content-between">
<a id= 'firstAlimentazione' class="small text-white stretched-link">View Details</a>
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</div>

以下ajax函数连接到

$(function() {
$('a#firstAlimentazione').bind('click', function() {
$.getJSON('/firstScript',
function(data) {
});
return false;
});
});

调用以下python代码

# background process happening without any refreshing
@app.route('/firstScript')
def firstScript():
storage = restore_value()
hostname = storage.get(1)
port = storage.get(2)
db_name = storage.get(3)
name_tab = storage.get(4)
directory_to_load = storage.get(5)
directory_log = storage.get(6)
print(os.system("python3 FirstSupply/script.py " + hostname+" "+port+" "+db_name+" "+name_tab+" "+directory_to_load+" " + directory_log))
return "nothing"

由于"python3脚本"可能需要几分钟才能完成，我想显示一个警报，指示操作的加载和随后的终止。

我该怎么做？

Answer 1

这是我在Flask项目中采用的一种方法。

我有一个加载程序，我包括在页面上，我想显示这种消息。我会把这样的东西放在模板的底部：

{% include "loading-modal.html" %}

内容可以是你想要的任何内容。它可能只是一个简单的消息/警报，也可能是某种动画。我在简单动画的底部添加了链接。

此加载程序的样式将包括：

display: none;

这样加载程序就不会显示给用户。然后，当我运行ajax函数时，我会用以下内容使加载程序可见：

var loader = document.getElementById('loading-bg');
loader.style.display = 'block';

这将使加载程序可见，直到我再次隐藏它，或者将用户重定向到他们要访问的任何页面。我不会再次隐藏模态，直到后台发生的任何事情都将结果返回到我的ajax函数。

这种方法假设你不需要能够向用户提供某种进度指示，或者你不能，因为你不知道需要多长时间。它还假设您的用户在运行此脚本时无法与屏幕交互，因为我通常会对页面的内容设置透明度，从而阻止所有内容。

如果你想让你的加载程序包含某种动画，这里有一个我以前用过的：

https://tobiasahlin.com/spinkit/https://github.com/tobiasahlin/SpinKit

我希望这能有所帮助。