52

私はまだ Flask に比較的慣れておらず、一般的には Web 初心者ですが、これまでのところいくつかの良い結果が得られています。現在、ユーザーがクエリを入力するフォームがあります。これは、結果を返すのに 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>

この例が役立つことを願っています。

4

5 に答える 5

52

これを 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();">

ローディングとコンテンツ 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 が表示されます。これは、データが処理されてフラスコが新しいページをロードするまで表示されます。

于 2015-03-19T13:56:51.400 に答える
19

divこれは、「読み込み中のgif」画像を含むを使用して実行できます。送信ボタンをクリックすると、javascriptを使用してdivが表示されます。これを実装するには、次のWebサイトを参照してください。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 /

于 2013-01-25T21:04:02.200 に答える