JavaScriptからFlaskにJsonデータを送信するには

Question

Dyanmic Form Builderを作成しようとしています。ビルドプロセスの後、私はJsonObjectにすべてのフォームデータをスクリプトで入れてフラスコビューに渡そうとしているので、ユーザーにそれらを表示することができます。しかし、私はそれを正しく設定できませんでした。ここ ボタンがjavascriptの

<form action="/preview" method="post" role="form"> 
<button class="btn btn-primary" name = "submit" id = "submit">submit</button> 
</form> 

を呼び出して、ここで私はAJAX呼び出しを行うスクリプトです。

<script> 
    $(document).ready(function() { 
     $('#submit').click(function() { 
      var formdata = serialize(); 
      $.ajax({ 
       type: 'POST', 
       contentType: 'application/json', 
       data: JSON.stringify(formdata), 
       dataType: 'json', 
       url: 'http://192.168.58.206:5000/index', 
       success: function (e) { 
        console.log(e); 
       }, 
       error: function(error) { 
       console.log(error); 
       } 
       }); 
      }); 
     }); 
</script> 

ここで私はフラスコのpythonでレンダリングしようとしています。

@app.route('/', methods=['GET', 'POST']) 
@app.route('/index', methods=['GET', 'POST']) 
def index(): 
    if request.method == 'POST': 
     asd = request.json 
     session['formdata'] = asd 
     if 'formdata' in session: 
      return json.dumps({'success': True}), 200, {'ContentType': 'application/json'} 
    return render_template("index.html") 

@app.route('/preview', methods=['GET', 'POST']) 
def preview(): 
    if 'formdata' in session: 

     renderedform = formbuilder(json.dumps(session['formdata'])) 
     renderedform = renderedform.renderform() 
     session.pop('formdata') 
     return render_template("asd.html",renderform = renderedform) 
    return "Error" 

私のrenderdorm（）メソッドは、パラメータとしてjsonオブジェクトを受け取り、フォームに対応するhtmlブロックを作成します。

しかし、このように実行すると、スクリプトの実行前にボタンアクションが/ previewルートに移動され、jsonオブジェクトが作成されることがあります。このため、セッションのフォームデータはNoneになります。

どのようにプレビューでレンダリングするjsonオブジェクトを渡すことができますか？あなたは、ユーザーがクリックしたときにボタンアクションがセッションと呼ばれているので、フォーム上のアクションフィールドを削除する必要が

Answer 1

がアヤックスに続い

<form method="post" role="form"> 
<button class="btn btn-primary" name = "submit" id = "submit">submit</button> 
</form> 

を設定することはできません、あなたは成功

上のウィンドウの場所に設定する必要があります

<script> 
     $(document).ready(function() { 
     $('#submit').click(function() { 
      var formdata = serialize(); 
      $.ajax({ 
       type: 'POST', 
       contentType: 'application/json', 
       data: JSON.stringify(formdata), 
       dataType: 'json', 
       url: 'http://192.168.57.223:5000/createform', 
       success: function (e) { 
        console.log(e); 
        window.location = "http://192.168.57.223:5000/preview"; 
       }, 
       error: function(error) { 
       console.log(error); 
      } 
      }); 
     }); 
    }); 
    </script> 

、あなたのPythonスクリプトは、あなたが値を取り、アヤックスは、目的のウィンドウの場所を設定することを言う必要がある。このようになるはずです

@app.route('/index', methods=['GET', 'POST']) 
def index(): 
    if request.method == 'POST': 
     asd = request.json 
     print(asd) 
     session['formdata'] = asd 
     if 'formdata' in session: 
      return json.dumps({'success': True}), 200, {'ContentType': 'application/json'} 
    return render_template("createform.html")