jquery ajaxからPOSTリクエストをフラスコビューに送信するにはどうすればよいですか？

あなたは素晴らしい一日を過ごしたいと思っています：D 私は何をするのか説明することから始めましょう：私は1つのhtmlページ（index.html）と1つのビュー（/ index）を持っています。その上、ここで/ indexビューにJSONオブジェクトを送信するためにjqueryのAJAXを使用します提出する非常に単純でわかりやすいのindex.htmlのためのコードです：jquery ajaxからPOSTリクエストをフラスコビューに送信するにはどうすればよいですか？

<body> 
<form action="/" method='post'> 
    <button id='submit'>submit</button> 
</form> 

<script src="../static/jquery.min.js"></script> 
<script> 
    function saveMenu() { 
     localStorage.setItem("shoppingMenu", JSON.stringify(
      [{"name":"*Kabab Combo Plate","price":10.99,"count":4}, 
      {"name":"Mixed Grill(Lamb, Chicken, Kefta)","price":14.99,"count":4}] 
      )); 
    }; 

    saveMenu(); 

    function loadMenu() { 
     menu = JSON.parse(localStorage.getItem("shoppingMenu")); 
     return menu; 
    }; 
</script> 
<script> 
    $(document).ready(function() { 
     var menu = JSON.stringify(loadMenu()); 
     $('#submit').click(function(){ 
      $.ajax({ 
       data: menu, 
       dataType: 'json', 
       type: 'POST', 
       contentType: 'application/json; charset=utf-8', 
       url: '{{ url_for("index") }}', 
       success: function(m){ 
         console.log(m); 
       }, 
       error: function(m){ 
        console.log(m); 
       } 
      }); 
     }); 
    }); 
</script> 
</body>

、ここでは、/ indexビューのコードです私がprint文を追加したことに注目してください。これはデバッグ目的のためのものです。

@app.route('/', methods=['POST', 'GET']) 
def index(): 
    if request.method == 'POST': 
     data = request.json 
     print('header: ', request.headers.get('Content-Type')) 
     print('data type: ', type(data)) 
     print('data = ', data) 
     for i in data: 
      print(i) 
     return 'success' 
    return render_template('index.html')

print文の出力を見ることで、エラーがrequest.jsonが正常に動作していると我々はしたデータを返しているという通知を示して前に

* Debugger is active! 
* Debugger PIN: 143-889-961 
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) 
127.0.0.1 - - [24/Oct/2017 21:12:20] "GET/HTTP/1.1" 200 - 
header: application/json; charset=UTF-8 
data type: <class 'list'> 
data = [{'name': '*Kabab Combo Plate', 'count': 4, 'price': 10.99}, {'name': 'Mixed Grill(Lamb, Chicken, Kefta)', 'count': 4, 'price': 14.99}] 
{'name': '*Kabab Combo Plate', 'count': 4, 'price': 10.99} 
{'name': 'Mixed Grill(Lamb, Chicken, Kefta)', 'count': 4, 'price': 14.99} 
127.0.0.1 - - [24/Oct/2017 21:12:24] "POST/HTTP/1.1" 200 - 
header: application/x-www-form-urlencoded 
data type: <class 'NoneType'> 
data = None 
127.0.0.1 - - [24/Oct/2017 21:12:24] "POST/HTTP/1.1" 500 - 
Traceback (most recent call last): 
    File "C:\Users\Orbit\flaskname\lib\site-packages\flask\app.py", line 1997, in __call__ 
    return self.wsgi_app(environ, start_response) 
    File "C:\Users\Orbit\flaskname\lib\site-packages\flask\app.py", line 1985, in wsgi_app 
    response = self.handle_exception(e) 
    File "C:\Users\Orbit\flaskname\lib\site-packages\flask\app.py", line 1540, in handle_exception 
    reraise(exc_type, exc_value, tb) 
    File "C:\Users\Orbit\flaskname\lib\site-packages\flask\_compat.py", line 33, in reraise 
    raise value 
    File "C:\Users\Orbit\flaskname\lib\site-packages\flask\app.py", line 1982, in wsgi_app 
    response = self.full_dispatch_request() 
    File "C:\Users\Orbit\flaskname\lib\site-packages\flask\app.py", line 1614, in full_dispatch_request 
    rv = self.handle_user_exception(e) 
    File "C:\Users\Orbit\flaskname\lib\site-packages\flask\app.py", line 1517, in handle_user_exception 
    reraise(exc_type, exc_value, tb) 
    File "C:\Users\Orbit\flaskname\lib\site-packages\flask\_compat.py", line 33, in reraise 
    raise value 
    File "C:\Users\Orbit\flaskname\lib\site-packages\flask\app.py", line 1612, in full_dispatch_request 
    rv = self.dispatch_request() 
    File "C:\Users\Orbit\flaskname\lib\site-packages\flask\app.py", line 1598, in dispatch_request 
    return self.view_functions[rule.endpoint](**req.view_args) 
    File "C:\Users\Orbit\flaskname\app\hello.py", line 25, in index 
    for i in data: 
TypeError: 'NoneType' object is not iterable 
127.0.0.1 - - [24/Oct/2017 21:12:24] "GET /?__debugger__=yes&cmd=resource&f=style.css HTTP/1.1" 200 - 
127.0.0.1 - - [24/Oct/2017 21:12:24] "GET /?__debugger__=yes&cmd=resource&f=jquery.js HTTP/1.1" 200 - 
127.0.0.1 - - [24/Oct/2017 21:12:24] "GET /?__debugger__=yes&cmd=resource&f=debugger.js HTTP/1.1" 200 - 
127.0.0.1 - - [24/Oct/2017 21:12:24] "GET /?__debugger__=yes&cmd=resource&f=ubuntu.ttf HTTP/1.1" 200 - 
127.0.0.1 - - [24/Oct/2017 21:12:24] "GET /?__debugger__=yes&cmd=resource&f=console.png HTTP/1.1" 200 -

：

は今ここに、以前のコードが実行されますときに何が起こるかであります期待していますが、127.0.0.1 - - [24/Oct/2017 21:12:24] "POST/HTTP/1.1" 200 -が表示され、ビュー関数がそれ自身を再実行していて、printステートメントがデータ変数の値としてnoneを出力しているように見えます...なぜこのパターンが起こっているのか知っていますか？それを修正する方法は？

出典

2017-10-24 belle

デフォルトでは、フォームのサブミットイベント（この場合は送信ボタンをクリックすると発生します）はフォームのactionにリダイレクトされるため、実際に実行しています2つのリクエスト（ajaxとデフォルト）。

これを防ぐには、クリックハンドラ内でevent.preventDefaultを呼び出して（そして引数にeventを追加してください）。このようにあなたはまた、フラスコビューからJSONレスポンスを返す必要が

.click(function(event) { 
    // ... 
    event.preventDefault() 
}

：

from flask import jsonify 

# ... 

    return jsonify('success')

出典

2017-10-24 21:19:42

ありがとう:)）。これにより、トレースバックエラーが防止されました。しかし、AJAXはエラー関数 'error：function（m）{console.log（m）;}'をロギングしています： 'readyState：4'、' responseText： "success" '、 'status：200'、' status： "OK" 'これまでのところ私を十分に助けてくれましたが、なぜアヤックスのエラーが表示されているのか分かっていたり、気にする必要がある場合は教えてください。お返事ありがとう^^ – belle

戻り値「成功」が返されていません.... – belle

この問題はリクエストでjsonを要求していますが、文字列を返すのでjQueryが解析エラーをスローします。それを修正するには、フラスコのビューからjsonを返す必要があります。これを示すための答えを更新しました。 –

あなたはHTMLテンプレートでフォームを除去することにより、現在のパターンを修正することができます。

<button id='submit'>submit</button>

だけでは、ボタンをしてみましょうか、必要に応じて別のセクション内に置くが、フォームは、並列要求を行うようです。私はそれをよりよく説明するためにいくつかの文書をリンクしようとします。

出典

2017-10-24 21:15:16 PRMoureu

はありがとうは、一つの問題を解決する方法が、私は他の目的のためにフォームを使用する必要があること@PRMoureuだから私はそれを保って、 'preventDefault'を使って、ルイスが示唆したように、フォームを持たないようにシミュレートします。 – belle

jquery ajaxからPOSTリクエストをフラスコビューに送信するにはどうすればよいですか？

答えて

関連する問題