如何在flask中执行后台操作时显示加载消息？

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

这是我在一个烧瓶项目中采用的一种方法

我有一个加载器，我包括在页面上，我想显示这种消息。我将在模板底部放置类似的内容：

{% 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

我希望这有帮助