在Flask中执行耗时功能时显示"加载"消息
jrm*_*edd 33 html python loading flask
我对Flask来说还是比较新的,一般来说还是一个网络菜鸟,但到目前为止我已经取得了一些好成绩.现在我有一个用户输入查询的表单,该表单被赋予一个函数,该函数可能需要5到30秒才能返回结果(使用Freebase API查找数据).
问题是我不能让用户知道他们的查询在这段时间内正在加载,因为只有在函数完成其工作后才会加载结果页面.有没有办法在正在进行时显示加载消息？我发现一些Javascript可以在页面元素仍然加载时显示加载消息,但我的等待时间发生在'render_template'之前.
我把一些示例代码拼凑在一起,只是为了证明我的情况:
蟒蛇:
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()
摘自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>
摘自done.html:
<body>
<h3>Results:</h3>
<p>
{{ display }}
</p>
</body>
任何帮助将不胜感激,我希望这个例子有所帮助.
jka*_*.ne 29
将它添加到index.html或js文件中(我假设你在这里有jQuery,你当然可以使用标准的javascript.):
<script type="text/javascript">// <![CDATA[
function loading(){
$("#loading").show();
$("#content").hide();
}
// ]]></script>
将此添加到您的html或css文件:
div#loading {
width: 35px;
height: 35px;
display: none;
background: url(/static/loadingimage.gif) no-repeat;
cursor: wait;
}
您可以从http://www.ajaxload.info/获得足够的GIF .下载并将其放入静态文件夹.
然后更改提交按钮以调用js函数:
<input type="submit" name="anything_submit" value="Submit" onclick="loading();">
并在您的基本html文件中添加加载和内容div:
<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>
现在,当您单击"提交"时,js函数应隐藏您的内容并显示加载GIF.这将显示,直到您的数据被处理并且烧瓶加载新页面.
- 不要忘记添加 `<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>` (2认同)
Arn*_*ens 12
这可以通过使用div包含'加载gif'图像的来完成.单击提交按钮时,将使用javascript显示div.要实现这一点,您可以浏览一下这个网站:http://www.netavatar.co.in/2011/05/31/how-to-show-a-loading-gif-image-while-a-page -loads-使用的JavaScript和- CSS /
- 2019 年此处的链接已损坏 (2认同)
- @rvictordelta 谢谢你让我知道。我用存档版本替换了 URL。 (2认同)
