问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在 Flask 中执行耗时函数时显示“正在加载”消息

社区维基
1
新手上路，请多包涵

我对 Flask 还是比较陌生，总的来说有点网络菜鸟，但到目前为止我已经取得了一些不错的成绩。现在我有一个表单，用户可以在其中输入一个查询，该查询被提供给一个函数，该函数可能需要 5 到 30 秒才能返回结果（使用 Freebase API 查找数据）。

问题是我不能让用户知道他们的查询在这段时间内正在加载，因为结果页面只会在函数完成其工作后加载。有没有办法在进行时显示加载消息？我发现一些 Javascript 可以在页面元素仍在加载时显示加载消息，但我的等待时间发生在“render_template”之前。

我整理了一些示例代码，只是为了演示我的情况：

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()

摘自 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>

任何帮助将不胜感激，我希望这个例子有所帮助。

原文由 jrmedd 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译pythonhtmlflaskloading
阅读 1.5k
2 个回答
得票最新
社区维基
1
✓ 已被采纳
社区维基
1

将其添加到您的 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。这将显示，直到您的数据被处理并且 flask 加载新页面。

原文由 jka.ne 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题