而耗时的功能是在瓶执行显示“加载”消息(Display a ‘loading’ message wh

2019-07-18 16:56发布

我还是比较新的瓶,有点一般网络小白,但到目前为止,我已经有一些很好的效果。 现在我已经得到了用户在其中输入查询,这是考虑到,可以采取之间的任何地方5到30秒返回结果的函数形式(以游离碱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>

任何帮助将不胜感激,我希望这个例子可以帮助。

Answer 1:

这可以通过使用一个完成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 /



Answer 2:

添加到您的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;
    }

你可以从适当的GIF http://www.ajaxload.info/ 。 下载并把它放进你的静态文件夹。

然后改变你的提交按钮上方的js要调用的函数:

<input type="submit" name="anything_submit" value="Submit" onclick="loading();">

并添加加载和内容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>

现在,当你点击“提交”,该js函数应该隐藏自己的内容,并显示加载GIF。 这将显示,直到你的数据处理和烧瓶加载新的一页。



文章来源: Display a ‘loading’ message while a time consuming function is executed in Flask