爲什麼我的燒瓶應用程序無法從JavaScript恢復json？

Question

我嘗試從JavaScript發送json數據到flaskapp。但JavaScript發送的json數據不被容器接受，請求爲空，哪裏出錯？

這是我的燒瓶代碼。

@main.route('/getjson', methods = ['GET', 'POST']) 
def getjson(): 
    a = request.json 
    return jsonify(user = a) 

這是我的javascript代碼。

$(function(){ 
    $("#test").click(function(){ 
     $.ajax({ 
      url: "{{ url_for('main.getjson') }}", 
      type: "POST", 
      data: JSON.stringify({ 
       "n1": "test1", 
       "n2": "test2", 
       "n3": "test3" 
      }), 
      dataType: "json", 
      success: function(data){ 
       var a = data.user 
       var texthtml = "<p>" + a + "</p>" 
       $("#result").html(texthtml) 
      } 
     }); 
    }); 
}); 

頁面上返回的數據始終爲空。 Request.arg.get也不起作用。

Answer 1

Flask的request.json需要application/json內容類型，但$.ajax默認設置爲application/x-www-form-urlencoded。設置請求時的內容類型。

$.ajax({ 
     url: "{{ url_for('main.getjson') }}", 
     type: "POST", 
     data: JSON.stringify({ 
      "n1": "test1", 
      "n2": "test2", 
      "n3": "test3" 
     }), 
     contentType: "application/json", 
     dataType: "json", 
     success: function(data){ 
      var a = data.user 
      var texthtml = "<p>" + a + "</p>" 
      $("#result").html(texthtml) 
     } 
    }); 

另外，發送的對象本身，而不會JSON.stringify()：

$.ajax({ 
     url: "{{ url_for('main.getjson') }}", 
     type: "POST", 
     data: { 
      n1: "test1", 
      n2: "test2", 
      n3: "test3" 
     }, 
     dataType: "json", 
     success: function(data){ 
      var a = data.user 
      var texthtml = "<p>" + a + "</p>" 
      $("#result").html(texthtml) 
     } 
    }); 

這將發送數據的形式編碼的，所以你會使用request.form在瓶讀它。

dataType是您希望從服務器接收的數據類型，而contentType是您發送到服務器的數據類型。

參見：

• https://flask.readthedocs.io/en/latest/api/#flask.Request.json
• http://api.jquery.com/jquery.ajax/（部分：contentType中）