我搜索了很长一段时间，但无法找到答案。 我想提一下，我是Web开发的完全初学者，不知道AJAX或jQuery是什么。 所以，让我解决我的问题。
我写了一个Flask应用程序，它显示一个带有按钮的页面，当用户点击该按钮时，会调用一个执行一些处理（通常需要大约2分钟）的Python函数。 处理结束后，将打开一个新页面显示结果。 现在我想包含一个'加载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>result.html
<html> <body> <h1> Processing Done </h1> </body> </html>如果有人能指引我朝正确的方向发展，那将会非常有帮助。
I have written a Flask app that displays a page with a button, when the user clicks on that button a Python function is called which does some processing (which usually takes about 2 minutes). After this processing is over, a new page opens displaying the results. Now I want to include a 'loading gif' that indicates the user that the processing is in progress. How do I do this? Here is an example of what my code looks like.
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>result.html
<html> <body> <h1> Processing Done </h1> </body> </html>最满意答案
这只需要在客户端完成。
在标题部分添加jquery：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>将其添加到您的提交按钮代码：
onclick="$('#loading').show();"获取一个load.gif图像在html中的表单后面添加下面的代码
<div id="loading" style="display:none;"><img src="loading.gif" alt="" />Loading!</div>参考文献： 1 2
This needs to be done on the client side only.
Add jquery in your header section:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>Add this to your submit button code:
onclick="$('#loading').show();"Get a loading.gif image Add below code after your form in html
<div id="loading" style="display:none;"><img src="loading.gif" alt="" />Loading!</div>References: 1 2
更多推荐
发布评论