CODEWITHSUNDEEP
ajaxjsonpostserializationmultipartform-data
Csaba
Csaba

Reputation: 340

How to POST a JSON request containing an array of objects?

On the server side, I have a method which looks like this:

@POST
@Path("/foods/{year}/{month}/{day}")
@Consumes("multipart/mixed")
@Produces("application/json; charset=UTF-8")
@Transactional
public boolean setFoodsForTheDay(@PathParam("year") int year, @PathParam("month") int month,
  @PathParam("day") int day, @Multipart(value = "foodList", type = MediaType.APPLICATION_JSON) Food[] foodList) {

  if (log.isDebugEnabled()) {
    log.debug("list size={}", foodList.size());
  }
  doStuff(foodList);

}

If I send in the following POST request to /foods/2013/06/26 it will actually work and the array will get parsed correctly:

Host: localhost:7777
Accept: application/json
Content-Type: multipart/mixed; boundary=---------------------------25819220131967
Content-Length: 226

-----------------------------25819220131967\r\n
Content-Disposition: form-data; name="foodList"\r\n
Content-Type: application/json\r\n
\r\n
[   {"id":null,"name":"Banana","recipe":null}   ]\r\n
-----------------------------25819220131967--\r\n

As you can see, it's important to send in a multipart/mixed (or perhaps multipart/form-data would work too) because then I can set the Content-Type of the part, and it will get parsed correctly.

This all works. Now the problem is, I need to send this request in with jQuery (or any other Ajax tool) and looks like it's not possible to send multipart/mixed? Or there's some trick with an iframe but it will still not be possible to set the Content-type of the part.

Does anyone know of a solution for this problem? How can I send in an array of objects to the server in JSON serialization?

Upvotes: 0

Views: 1984

Answers (2)

Csaba
Csaba

Reputation: 340

Looks like this is not possibly with jQuery, however I did find a blog which shows how to do this with the old XMLHttpRequest.

This is my Javascript code now, it works perfectly! :)

function sendFoodRequest() {
    var xhr = new XMLHttpRequest();

    xhr.open("POST", 'http://localhost:7777/services/rest/foods/2013/06/25', true);

    var boundary = '---------------------------';
    boundary += Math.floor(Math.random()*32768);
    boundary += Math.floor(Math.random()*32768);
    boundary += Math.floor(Math.random()*32768);
    xhr.setRequestHeader("Content-Type", 'multipart/mixed; boundary=' + boundary);
    var body = '';
    body += '--' + boundary + '\r\n' + 'Content-Disposition: form-data; name="foodList"' + '\r\n';
    body += "Content-Type: application/json\r\n\r\n";
    body += '[   {"id":null,"name":"Spinach","recipe":null}   ]';
    body += '\r\n'
    body += '--' + boundary + '--';
    xhr.setRequestHeader('Content-length', body.length);
    xhr.onload = function() { }
    xhr.send(body);
}

Upvotes: 3

Rafi W.
Rafi W.

Reputation: 184

Yes you can send multipart/mixed through JQuery ajax, but must add extra stuff:

cache: false,
contentType: false,
processData: false,


$.ajax({
    url: 'php/test.php',
    data: {name: "test1", age 5},
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

Upvotes: 0

Related Questions