2017-12-28 28 views
0

ajaxpostflaskにするボタンがあるページがあります。私は(例のためにハードコーディングによって単純化された)メッセージを計算するためにルートを望み、それを別のルートに戻し、ユーザーがいるページをリロードします。 redirect(urlfor())は別のルートを呼び出していますが、ページがリロードされないため、render_templateが呼び出されていないようです。フラスコリダイレクト(urlfor())はページをリロードしません

INITの.py

from flask import Flask, render_template, request, redirect, url_for 

app = Flask(__name__) 


@app.route('/second_route', methods=['POST']) 
def second_route(): 
    print request.json 
    return redirect(url_for('hello_world', message='test')) 


@app.route('/') 
def hello_world(message=None): 
    return render_template('index.html', message=message) 


app.run() 

index.htmlを私の知る限り、リダイレクト応答を扱うことができない

答えて

1
<html> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 


    <script> 
     $(document).ready(function() { 
      $('#mybutton').click(function() { 
       $.ajax({ 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        url: "/second_route", 
        data: JSON.stringify({}), 
        success: [], 
        dataType: "json" 
       }); 

      }); 
     }); 


    </script> 
</head> 
<body> 
{{ message }} 
<button id="mybutton" name="mybutton" type="button">Click Me!</button> 
</body> 
</html> 

AJAX。あなたは、{{message}}<span id="message">にカプセル化し、要素を識別し、AJAX完了成功時にカスタムテキストを挿入するためにjQuery .html()を実行することができます。リダイレクトするように

$.ajax({ 
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    url: "/second_route", 
    data: JSON.stringify({}), 
    success: [], 
    dataType: "json" 
}).done(function(){ 
    $('#message').html('test'); 
    window.location.href = '/'; 
}).fail(function(response){ 
    $('#message').html(response['responseText']); 
}); 

、あなたはwindow.location.href = "/someURL"done句内のコードを交換したいが、エンドポイントが同じであるため、これは必要ありません。この方法では、変数messageをまったく使用する必要はありません。

+0

ので、これは簡単な例でした。 'second_route'はデータをデータベースにプッシュするために使われます。 'message'はそのデータの成功を返すために使用され、ページをリロードするとデータベースからたくさんのものが再クエリされますので、divタグの' done'関数は私のアプリケーションでは動作しません。 'window.location.href'を使用した場合、メッセージにアクセスすることはできません。申し訳ありませんが、私の簡単な例は事を単純化しています。 – user2242044

+0

最初に 'index.html'を読み込む際にデータベースにクエリをしていますか?私は両方を含めてあなたが必要としていたと思います。 AJAX呼び出しでエラーが発生した場合のインクルード句 – Mangohero1

+0

私は 'done'にメッセージを保存するのか分からず、'/'ルートを再ロードするとメッセージが上書きされるので動作します。 – user2242044

1

これは私が質問を読んでいる人たちのために問題を解決する方法です。

は、この呼び出しで負荷を同じルートにページを投稿する私のポストの要求を変更する:

var posting = $.post(window.location.href, {'some key': 'some value'}); 
       posting.done(function() { 
        window.location.replace(window.location.href); 
       }); 
+0

ああ、それはやっている方法です。 'window.location.replace()'は私にとって初めてのものでした。私たちはどちらも何かを学んだと思います!紫外線 – Mangohero1

関連する問題