为什么我的烧瓶应用程序无法从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中）