2017-03-15 10 views
1

これはかなり長い間検索されましたが、回答が見つかりませんでした。私はWeb開発の完全な初心者であり、AJAXやjQueryが何であるか分かりません。ですから、私の質問に私をつかまえましょう。機能がFlaskのバックグラウンドで実行されているときにページにロードするgifを追加するにはどうすればよいですか?

ボタンでページを表示するFlaskアプリケーションを作成しました。ユーザーがそのボタンをクリックするとPython関数が呼び出され、何らかの処理が行われます(通常は約2分かかります)。この処理が終了すると、新しいページが開き、結果が表示されます。今、処理が進行中であることをユーザーに示す「読み込み用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> 

誰かが正しい方向に私を指すことができれば、それは大きな助けになるでしょう。

答えて

2

これは、クライアント側でのみ行う必要があります。あなたのヘッダーセクションで

追加jqueryの:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

があなたの送信ボタンのコードにこれを追加します。

onclick="$('#loading').show();" 

はloading.gifイメージがHTMLでフォームの後のコードの下に追加取得

<div id="loading" style="display:none;"><img src="loading.gif" alt="" />Loading!</div> 

参考文献: 12

+0

ありがとうございました!それは働いた:) –

関連する問題