表示「ロード」の画像時間がかかる機能をフラスコ

で実行されている間、私はこのようになり、フラスコ内のアプリを持っている：表示「ロード」の画像時間がかかる機能をフラスコ

app = Flask(__name__) 

@app.route('/') 
def start(): 
    return render_template('page1.html') # loads the start page on the beginning 

@app.route('/page2',methods=['GET','POST']) 
def read(): 
    if request.method == 'POST': 
     # lots of actions taking a long time 
     return render_template('page2.html', arg1=arg1, arg2=arg2)

を私が表示されます私のHTMLページ上の写真を追加したいです」ページ2がアップロードされるまで「読み込み中です。

は主に、このようなhereを示すように、私のHTMLにJavaScriptを書く：私が試した

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>IP/ISP Research</title> 
    <link rel="stylesheet" 
     type="text/css" 
     href="/static/style.css"/> 
</head> 

<body> 
    <center> 
    <h2>Search for something</h2> 
<form class="form-style-7" action="/page2" method="POST" > 
    <ul> 
    <li> 
     <label for="arg1">IP</label> 
     <input type="text" name="arg1" value="{{arg1}}" maxlength="100"> 
     <span>Enter arg1</span> 
    </li> 
    <li> 
     <label for="arg2">ISP</label> 
     <input type="text" name="arg2" value="{{arg2}}" maxlength="100"> 
     <span>Enter arg2</span> 
    </li> 
    <li> 
     <input class="go_button" type="submit" value="GO" > 
    </li> 
    </ul> 
</form>  
</center> 
</body> 
</html>

もの：これは、ページ1の私の現在のHTMLに似ています。

もshowImage()ための機能を追加し、HTMLフォームタグにこれを追加しようとした：例えばonSubmit="return showImage()

出典

2016-08-25 Yarden

使用のjQuery：onclick="showImage()

は、HTMLボタンのタグにこれを追加する試み

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>IP/ISP Research</title> 
    <link rel="stylesheet" 
     type="text/css" 
     href="/static/style.css"/> 
    <script src="//code.jquery.com/jquery-3.1.0.min.js" 
</head> 

<body> 
    <center> 
    <h2>Search for something</h2> 
<form class="form-style-7" action="/page2" method="POST" > 
    <ul> 
    <li> 
     <label for="arg1">IP</label> 
     <input type="text" name="arg1" value="{{arg1}}" maxlength="100"> 
     <span>Enter arg1</span> 
    </li> 
    <li> 
     <label for="arg2">ISP</label> 
     <input type="text" name="arg2" value="{{arg2}}" maxlength="100"> 
     <span>Enter arg2</span> 
    </li> 
    <li> 
     <input class="go_button" type="submit" value="GO" > 
    </li> 
    </ul> 
</form>  
<script> 
    $(".go_button").submit(function(event) { 
     # function showing loading progress bar 
    }); 
</script> 
</center> 
</body> 
</html>

出典

2016-08-25 08:56:43 turkus

ありがとう、私はjavascriptやjQueryに慣れていない、あなたは私が書く必要がある完全な機能を助けてくれますか？私はそれを私のHTML に入れますか？ – Yarden

表示「ロード」の画像時間がかかる機能をフラスコ

答えて

関連する問題