Flask：jQueryの後にページをレンダリングするajax $ .postコール

Question

jQuery $ .post（）を使用してフォームからフラスコ関数にデータを送信します。この関数は、長時間実行しているデータを計算します。この場合、私はいくつかのHTMLを返送するのではなく、むしろ新しいテンプレートをレンダリングします。どうすればjQuery/AJAXで関数を呼び出すことができますか？

フォーム：フォームの入力に

<form id='myform'> 
    <input type='text'> some input... 
    <input type='button' value='send form' id='mybutton'> 
</form> 

計算に時間がかかるので、私はjQueryを使ってそれを送信：フラスコ中で

$.("#mybutton").click(function() { 
    // get the data in form 
    $exampledata = 'foo' 
    $.post("/some/flask/function", {'data': $exampledata}, function(response) { 
     can I render a new template here with data from flask function? 
    }); 
}); 

を、対応する関数は次のようになります。

@app.route('/some/flask/function', methods=['POST']) 
def longCalculation():   
    form = request.form 
    data = form['data'] 

    result = runTheLongCalculation(data) 
    this does not work --> 
    return render_template('result.html',r=result) 
    how can I render a new template after an jQuery/AJAX call? 

私はリダイレクトURLとJSONを送り返したくないのですが、実際にはテンプレートをレンダリングします。

Answer 1

あなたがレンダリングテンプレートは、あなたがあなたのフラスココードで示されているようにそれを返し、ブラウザで次の操作を行うことができ、単にHTMLの一部である場合：

$.("#mybutton").click(function() { 
    // get the data in form 
    $exampledata = 'foo' 
    $.post("/some/flask/function", {'data': $exampledata}, function(response) { 
     var myDiv = $('#resultarea'); // The place where you want to inser the template 
     myDiv.html(response); 
    }); 
}); 

これはあなたのフラスコテンプレートを見ることを期待このような何か：

<div id='result'> 
    {{ result }} 
</div> 

それが大きくなることができますが、我々はページありませんので、サイドバー、メニューナビゲーションやHTML/bodyタグ、HTMLの単純な部分の内側に挿入されています。

Flask関数で完全に本格的なHTMLページを返すと、既存のページ内で正しく表示されないため、問題が発生します。

Answer 2

これを行うには多くの方法を試した後：

私は新しいページに長い実行しているサーバー側の計算からデータを送信するための最善の方法は、サーバー側のストレージのいくつかの種類を使用することだと思います。このようにして、ブラウザが閉じられたり、ユーザがウェブサイトから離脱しても、すべてが機能します。

シンプルで速く死んでいるので、私は赤字になります。