如何使用$ .ajax(jQuery或Zepto)发布对象数组 [英] How do I POST an array of objects with $.ajax (jQuery or Zepto)

问题描述

我想在Zepto或Jquery中用$ .ajax发布一个对象数组.两者都表现出相同的奇数错误，但我找不到我做错的事情.

使用"RestEasy"之类的测试客户端发送数据时，数据会保存到服务器，并且我可以在浏览器的网络面板中看到请求被篡改，因此我相信JS是罪魁祸首.

如果我发送对象数组作为POST的data属性，则不能正确发送它们.

数据对象:

var postData = [
    { "id":"1", "name":"bob"}
  , { "id":"2", "name":"jonas"}
  ]

请求:

$.ajax({
  url: _saveDeviceUrl
, type: 'POST'
, contentType: 'application/json'
, dataType: 'json'
, data: postData
, success: _madeSave.bind(this)
//, processData: false //Doesn't help
});

在浏览器中看到的请求正文:

"bob=undefined&jonas=undefined"

通过使用jQuery和Zepto用来准备POST数据的$ .param方法，可以更直接地看到这一点.

$.param(
  [
    { "id":"1", "name":"bob"}
  , { "id":"2", "name":"jonas"}
  ]
)
// Output: "bob=undefined&jonas=undefined"

因此，这些库对复杂的帖子数据所做的准备似乎与我期望的有所不同.

我看到了这个答案，但是由于要发布大量内容，所以我不想将数据作为查询参数发送. 如何在数组中发送数组.ajax使用jQuery发布吗?

使用jQuery/Zepto通过POST发送多个对象的正确方法是什么?

使用$ .ajax({... data:JSON.stringify(postData)...})发送无内容的内容，但服务器不喜欢这种格式.

更新: 好像JSON.stringify发送正确格式的内容.问题在于服务器端对于所需对象的结构非常非常具体.如果我从对象中添加或删除任何属性，它将使整个过程失败，而不是使用匹配的属性.这很不方便，因为可以将服务器发送的内容用作视图模型，但是视图模型会发生变化. ...仍在努力寻找最佳解决方案.

解决方案

在发送之前，请确保先stringify.我过多地依赖这些库，并认为它们可以根据我发布的contentType进行正确编码，但是似乎没有.

作品:

$.ajax({
    url: _saveAllDevicesUrl
,   type: 'POST'
,   contentType: 'application/json'
,   data: JSON.stringify(postData) //stringify is important
,   success: _madeSave.bind(this)
});

我更喜欢这种方法，而不是使用$ .toJSON之类的插件，尽管这样做确实可以实现相同的目的.

I'd like to POST an array of objects with $.ajax in Zepto or Jquery. Both exhibit the same odd error, but I can't find what I'm doing wrong.

The data saves to the server when sent using a test client like 'RestEasy', and I can see the request getting mangled in the browser's net panel, so I believe JS is the culprit.

If I send an array of objects as the data property of a POST, they are not properly sent.

Data object:

var postData = [
    { "id":"1", "name":"bob"}
  , { "id":"2", "name":"jonas"}
  ]

Request:

$.ajax({
  url: _saveDeviceUrl
, type: 'POST'
, contentType: 'application/json'
, dataType: 'json'
, data: postData
, success: _madeSave.bind(this)
//, processData: false //Doesn't help
});

Request body as seen in the browser:

"bob=undefined&jonas=undefined"

This can be seen more directly by using the $.param method that both jQuery and Zepto use to prepare POST data.

$.param(
  [
    { "id":"1", "name":"bob"}
  , { "id":"2", "name":"jonas"}
  ]
)
// Output: "bob=undefined&jonas=undefined"

So it seems like the preparation that these libraries do for complex post data is different than I expect.

I see this answer, but I don't want to send the data as a query param as I'm POSTing lots of content. How do I send an array in an .ajax post using jQuery?

What is the correct way to send multiple objects over POST using jQuery/Zepto?

Using $.ajax({... data: JSON.stringify(postData) ...}) sends non-mangled content, but the server doesn't like the format.

Update: Seems like JSON.stringify sends correctly formatted content. The issue is that the server side is very, very specific about the structure of the object that it wants. If I add or remove any properties from the object, it will fail the whole process rather than using the properties that do match. This is inconvenient because it's nice to use server-sent content as a view model, but view models get changed. ...Still working on the best solution.

解决方案

Be sure to stringify before sending. I leaned on the libraries too much and thought they would encode properly based on the contentType I was posting, but they do not seem to.

Works:

$.ajax({
    url: _saveAllDevicesUrl
,   type: 'POST'
,   contentType: 'application/json'
,   data: JSON.stringify(postData) //stringify is important
,   success: _madeSave.bind(this)
});

I prefer this method to using a plugin like $.toJSON, although that does accomplish the same thing.

这篇关于如何使用$ .ajax(jQuery或Zepto)发布对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！