2016-09-22 7 views
0

投稿要求を使用してajaxを使用してhtmlからpythonにいくつかのデータを渡そうとしています。しかし、要求の引数は空です。Ajaxを使用してフラスコにデータを渡す

単純なエンドポイントで、私は要求の形で来るすべての引数を表示しようとしています。

@app.route("/enter", methods=["POST", "GET"]) 
def enter_data(): 
    if request.method == "GET": 
     return render_template('index.html') 
    else: 
     print("post") 
     print(request.args) 
     return render_template('index.html') 

デバッグ出力

post 

ImmutableMultiDict([]) 
127.0.0.1 - - [22/Sep/2016 00:40:12] "POST /enter HTTP/1.1" 200 - 

AJAX関数値がJSコンソールに印刷されます

$(function() { 
    $('.button').click(function() { 
     var user = $('#userinput').val(); 
     console.log(user); 
     $.ajax({ 
      url: '/enter', 
      data: JSON.stringify({'user': $('#userinput').val()}), 
      type: 'POST', 
      success: on_request_success, 
      error: on_request_error, 
      }) 
     }); 
    }); 

以下の通りです。しかし、Python側には存在しません。

htmlコード

<body> 
     <h3>The Chef Bucket</h3> 
     Enter food you like to order. 
     <input type="text" name="user_data" id="userinput" /> 
     <input type="button" value="Submit" class="button"> 

     <div id="userinputdata"> 
      {% if not entered %} 
       <h4></h4> 
      {% else %} 
       <h4>{{ entered }}</h4> 
      {% endif %} 
     </div> 

    </body> 
+0

on_request_success関数はどこですか? – madalinivascu

+1

'POST/enter'にargsがないので、何も表示しません。 'POST/enter?foo = bar'を実行すると、何が印刷されますか? – alexpeits

答えて

0

のでご$('form').serialize()何もしない、あなたのhtmlコードには<form>タグはありません。

0

レンダリングテンプレート内で、テンプレート内に入力する要素を指定する必要があります。

これの代わりに;

@app.route("/enter", methods=["POST", "GET"]) 
def enter_data(): 
    if request.method == "GET": 
     return render_template('index.html') 
    else: 
     print("post") 
     print(request.args) 
     return render_template('index.html') 

これを試してください。

@app.route("/enter", methods=["POST", "GET"]) 
def enter_data(): 
    if request.method == "GET": 
     return render_template('index.html') 
    elif request.method == "POST": 
     entered = request.form['entered'] 
     return render_template('index.html', entered=entered) 
    else: 
     return render_template('index.html') 
+0

私はテンプルに記入する要素を追加する必要があることを知っています。しかし、私の問題は、私はサーバー側の要素を受信して​​いないです。 – kiran6

0

あなたのHTMLコードには<form>というタグはありません。したがって、あなたのdataのajax is要求の属性は空です。どちらのHTMLに<form>環境で<div>を入れたり、手でAJAXリクエストであなたのdata属性を設定します。

$(function() { 
    $('.button').click(function() { 
     var user = $('#userinput').val(); 
     console.log(user); 
     $.ajax({ 
      url: '/enter', 
      data: JSON.stringify({'user': $('#userinput').val()}), 
      type: 'POST', 
      success: on_request_success, 
      error: on_request_error, 
      }) 
     }); 
    }); 

data属性は、ここでは、サーバー上のデシリアライズする必要がJSONオブジェクトとして送信されることに注意してください側。単純なままにしたい場合は、それを辞書として定義してください。

関連する問題