私はまだFlaskに比較的慣れておらず、一般的にWeb初心者でもありますが、これまでのところ良い結果が得られています。現在、ユーザーがクエリを入力するフォームがあります。これは、結果を返すまでに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>
どんな助けも大歓迎です、私はこの例が役立つことを望みます。
これは、「loading gif」画像を含むdiv
を使用して実行できます。送信ボタンをクリックすると、javascriptを使用してdivが表示されます。これを実装するには、次のWebサイトをご覧ください: http://web.archive.org/web/20181023063601/http://www.netavatar.co.in/2011/05/31/how -to-a-loading-gif-image-while-a-page-loads-using-javascript-and-css /
これを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を表示します。これは、データが処理され、flask=が新しいページをロードするまで表示されます。