Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I POST an array of objects with $.ajax (jQuery or Zepto)

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.

like image 861
SimplGy Avatar asked Jun 19 '12 21:06

SimplGy


People also ask

How do you send an array of objects?

Passing array of objects as parameter in C++ It can be declared as an array of any datatype. Syntax: classname array_name [size];

Can we send array through AJAX?

You can simply pass a JavaScript Array variable in the $. ajax as any other variable. On PHP script you can directly use it as a normal PHP Array.

Can AJAX use POST?

post() makes Ajax requests using the HTTP POST method. The basic syntax of these methods can be given with: $. get(URL, data, success); —Or— $.

Should I use AJAX or POST?

Use POST if your call is going to write any data at all to the server. In fact, you should not only use this criterion for selecting between GET and POST for your Ajax calls but also for when selecting which should be used for processing forms on your web page.


2 Answers

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.

like image 73
SimplGy Avatar answered Oct 09 '22 07:10

SimplGy


Try the following:

$.ajax({   url: _saveDeviceUrl , type: 'POST' , contentType: 'application/json' , dataType: 'json' , data: {'myArray': postData} , success: _madeSave.bind(this) //, processData: false //Doesn't help }); 
like image 35
Ricardo Alvaro Lohmann Avatar answered Oct 09 '22 09:10

Ricardo Alvaro Lohmann