Python 在 Flask 中执行耗时函数时显示“正在加载”消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14525029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display a ‘loading’ message while a time consuming function is executed in Flask
提问by jrmedd
I'm still relatively new to Flask, and a bit of a web noob in general, but I've had some good results so far. Right now I've got a form in which users enter a query, which is given to a function that can take anywhere between 5 and 30 seconds to return a result (looking up data with the Freebase API).
我对 Flask 还是比较陌生，一般来说有点网络菜鸟，但到目前为止我已经取得了一些不错的结果。现在我有一个用户输入查询的表单，该查询被赋予一个函数，该函数可能需要 5 到 30 秒的时间来返回结果（使用 Freebase API 查找数据）。
The problem is that I can't let the user know that their query is loading during this time, as the results page only loads once the function finishes its work. Is there a way I can display a loading message while that's going on? I found some Javascript that could display a loading message while page elements are still loading, but my waiting period happens before ‘render_template'.
问题是我不能让用户知道他们的查询在这段时间内正在加载，因为结果页面只在函数完成其工作后加载。有没有一种方法可以在发生加载时显示加载消息？我发现一些 Javascript 可以在页面元素仍在加载时显示加载消息，但我的等待期发生在 'render_template' 之前。
I knocked together some example code, just to demonstrate my situation:
我拼凑了一些示例代码，只是为了演示我的情况：
Python:
Python：
from flask import Flask
from flask import request
from flask import render_template
import time
app = Flask(__name__)
def long_load(typeback):
time.sleep(5) #just simulating the waiting period
return "You typed: %s" % typeback
@app.route('/')
def home():
return render_template("index.html")
@app.route('/', methods=['POST'])
def form(display=None):
query = request.form['anything']
outcome = long_load(query)
return render_template("done.html", display=outcome)
if __name__ == '__main__':
#app.debug = True
app.run()
Excerpt from index.html:
摘自 index.html：
<body>
<h3>Type anything:</h3>
<p>
<form action="." method="POST">
<input type="text" name="anything" placeholder="Type anything here">
<input type="submit" name="anything_submit" value="Submit">
</form>
</p>
</body>
Excerpt from done.html:
摘自 done.html：
<body>
<h3>Results:</h3>
<p>
{{ display }}
</p>
</body>
Any help would be greatly appreciated, I hope this example helps.
任何帮助将不胜感激，我希望这个例子有帮助。
采纳答案by Arno Moonens
This can be done by using a divthat contains a 'loading gif' image. When the submit button is clicked, the div is displayed using javascript.
To implement this, you can take a look at this website: http://web.archive.org/web/20181023063601/http://www.netavatar.co.in/2011/05/31/how-to-show-a-loading-gif-image-while-a-page-loads-using-javascript-and-css/
这可以通过使用div包含“正在加载 gif”图像的 来完成。单击提交按钮时，将使用 javascript 显示 div。要实现这一点，你可以看看这个网站：http: //web.archive.org/web/20181023063601/http: //www.netavatar.co.in/2011/05/31/how-to-show -a-loading-gif-image-while-a-page-loads-using-javascript-and-css/
回答by jka.ne
Add this to your index.html or js file (I'm assuming you have jQuery here, you could use standard javascript of course.):
将此添加到您的 index.html 或 js 文件（我假设您在这里有 jQuery，您当然可以使用标准的 javascript。）：
<script type="text/javascript">// <![CDATA[
function loading(){
$("#loading").show();
$("#content").hide();
}
// ]]></script>
Add this to you html or css file:
将此添加到您的 html 或 css 文件中：
div#loading {
width: 35px;
height: 35px;
display: none;
background: url(/static/loadingimage.gif) no-repeat;
cursor: wait;
}
You can get an adequate GIF from http://www.ajaxload.info/. Download and put it into your static folder.
您可以从http://www.ajaxload.info/获得足够的 GIF 。下载并将其放入您的静态文件夹中。
Then change your submission button to call above js function:
然后更改您的提交按钮以调用上面的 js 函数：
<input type="submit" name="anything_submit" value="Submit" onclick="loading();">
and add in a loading and a content div to you base html file:
并将加载和内容 div 添加到您的基本 html 文件中：
<body>
<div id="loading"></div>
<div id="content">
<h3>Type anything:</h3>
<p>
<form action="." method="POST">
<input type="text" name="anything" placeholder="Type anything here">
<input type="submit" name="anything_submit" value="Submit" onclick="loading();">
</form>
</p>
</div>
</body>
Now when you click 'Submit', the js function should hide your content and display a loading GIF. This will display until your data is processed and flask loads the new page.
现在，当您单击“提交”时，js 函数应该隐藏您的内容并显示一个正在加载的 GIF。这将一直显示，直到您的数据被处理并且烧瓶加载新页面。
回答by shosaco
I found the purely CSS-dependent loader very useful. It does not depend on external resources:
我发现纯粹依赖 CSS 的加载器非常有用。它不依赖于外部资源：
https://www.w3schools.com/howto/howto_css_loader.asp
https://www.w3schools.com/howto/howto_css_loader.asp
