如何使用 jquery ajax 正确地将 json 对象传递给烧瓶服务器

Posted 2023-02-23

【中文标题】如何使用 jquery ajax 正确地将 json 对象传递给烧瓶服务器

【英文标题】：how to correctly pass a json object to flask server using jquery ajax

【发布时间】：2013-03-25 23:18:16

【问题描述】：

我想将一个包含嵌套对象的 json 对象从我的客户端传递到我的服务器。

在客户端，我的数据结构如下所示：

var response = ;
response['screening'] = '1';
response['assistance'] = 'wheelchair access';
response['guests'] = ;
response['guests']['1'] = 
response['guests']['1']['first'] = 'John'
response['guests']['1']['last'] = 'Smith'
response['guests']['2'] = 
response['guests']['2']['first'] = 'Dave'
response['guests']['2']['last'] = 'Smith'

我的 ajax 调用如下所示：

$.ajax(
  type: "POST",
  url: window.location.pathname,
  data: response
 ).done(function( msg ) 
   alert( "Data Saved: " + msg );
 );

在将这些数据发布到使用 python 烧瓶运行的服务器后，我使用 request.form 对象检查从客户端发布的内容。我希望以相同的方式构造数据，但是，这是服务器上的输出：

ImmutableMultiDict([('guests[1][first]', u'John'), ('screening', u'2'), ('guests[2][last]', u'Smith'), ('guests[2][first]', u'Dave'), ('assistance', u'wheelchair access'), ('guests[1][last]', u'Smith')])

如您所见，response['guests'] 对象及其所有子对象都被展平，例如：

'客人[2][第一名]'

...只是一个字符串，而不是其父响应['guests']的元素。

有没有更好的方法将这个数据块从我的客户端发送到我的服务器，并正确维护其结构？

谢谢！

【参考方案1】：

在客户端，您需要将该 javascript 对象转换为 json 字符串。为此，您可以使用：

JSON.stringify(my_object) // This will return a string that you can pass in you ajax request

然后在服务器端，您需要使用 json 模块将该对象转换为 python 字典：

import simplejson
my_new_object = simplejson.loads(my_json) // my_json is my_object from the client (previously called my_object)

my_new_object 现在是一个 python 字典，你可以用它做任何你想做的事情

【参考方案2】：

您可以将对象作为 JSON 字符串发送：

var data = 
    screening: '1',
    assistance: 'wheelchair access',
    guests: [
        
            first: 'John',
            last: 'Smith'
        ,
        
            first: 'Dave',
            last: 'Smith'
        
    ]
;

$.ajax(
    type: 'POST',
    url: window.location.href,
    data: JSON.stringify(response),
    dataType: 'json',
    contentType: 'application/json; charset=utf-8'
).done(function(msg) 
    alert("Data Saved: " + msg);
);

然后使用request.json访问它。

【讨论】：

完全有效！谢谢。有一件事，.done() 方法永远不会执行，即使我可以在我的服务器上看到数据，并且当我检查 chrome dev 网络选项卡时，这个请求有一个 POST 200 OK。

别介意上面的评论。我需要 jsonify 来自服务器的响应。再次感谢您的帮助。