当函数在Flask后台运行时，如何向页面添加加载gif？答案

【问题标题】：How to add a loading gif to the page when a function runs in the background in Flask?当函数在Flask后台运行时，如何向页面添加加载gif？
【发布时间】：2017-08-05 22:56:49
【问题描述】：

我编写了一个 Flask 应用程序，它显示一个带有按钮的页面，当用户单击该按钮时，会调用一个 Python 函数来进行一些处理（通常需要大约 2 分钟）。此处理结束后，将打开一个显示结果的新页面。现在我想包含一个“加载 gif”，指示用户正在进行处理。我该怎么做呢？这是我的代码的示例。

app.py

from flask import Flask, render_template
 import time

 app = Flask(__name__)

 @app.route('/')
 def index():
     return render_template('index.html')

 @app.route('/result', methods=['POST'])
 def result():
     time.sleep(5) # indicates the time delay caused due to processing
     return render_template('result.html')

 if __name__ == '__main__':
     app.run(debug=True)

index.html

<html>
    <body>
        <form method=post action="/result">
            <input type=submit value='Start Processing' name='submit_btn'>
        </form>
    </body>
</html>

结果.html

<html>
    <body>
        <h1> Processing Done </h1>
    </body>
</html>

【问题讨论】：

标签： javascript python html flask

【解决方案1】：

这只需要在客户端完成。

在标题部分添加 jquery：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

将此添加到您的提交按钮代码中：

onclick="$('#loading').show();"

获取 loading.gif 图片在 html 中的表单后添加以下代码

<div id="loading" style="display:none;"><img src="loading.gif" alt="" />Loading!</div>

参考资料： 1 2

【讨论】：