How do you send an array as part of an (jquery) ajax request

Question

I tried to send an array as part of an ajax request like this:

var query = [];
// in between I add some values to 'query'
$.ajax({
    url: "MyServlet", 
    data: query,
    dataType: "json",  
    success: function(noOfResults) { 
    alert(noOfResults); 
    }
  });
}

I wanted to see what I get back in the servlet, so I used this line:

System.out.println(request.getParameterMap().toString());

Which returned {} suggesting an empty map.

Firebug tells me I am getting a 400 bad request error

If I send a queryString like attribute=value as the 'data' then everything works fine, so it has to do with not being able to send an array as is. What do I have to do to get that data into the servlet for further processing. I don't want to pull it out and turn it into a queryString in the JS if I can avoid it.

EDIT: I used the .serializeArray() (jQuery) function before sending the data. I don't get the 400 but nothing useful is being sent through.

What does `query` contain? (strings / objects?). If you pass an array to `data`, jQuery assumes it is in the format: `[{ name: 'name', value: 'Jim' },{ name: 'age', value: '20' }]`. — Matt, Jan 11 '11 at 10:20
Each array value is supposed to be another array of objects - but for now I am just trying to get a simple example to work, similar to what you have there. — Ankur, Jan 11 '11 at 14:01

score 4 · Accepted Answer · edited Jan 11 '11 at 10:15

4

You have to send an object which you first stringify with JSON.stringify.

like this:

var query = [];
// in between I add some values to 'query'
$.ajax({
    url: "MyServlet",
    data: JSON.stringify({ nameParameter: query })
    dataType: "json",
    success: function(noOfResults) {
        alert(noOfResults);
    }
  });
}

edited Jan 11 '11 at 10:15

Matt

74,352
26
153
180

answered Jan 11 '11 at 10:14

peterthegreat

406
3
9

1

Note that not all browsers include the `JSON` library. You should include the `json2` library: https://github.com/douglascrockford/JSON-js – Matt Jan 11 '11 at 10:22
It didn't seem to work. But that could be due to an error elsewhere. I am going to try the method suggested here http://stackoverflow.com/questions/191881/serializing-to-json-in-jquery – Ankur Jan 11 '11 at 10:27
I should refresh my browser more often! Thanks for the extra info Matt – Ankur Jan 11 '11 at 10:28
I should add, that once the json2.js file is included, it works fine. – Ankur Jan 11 '11 at 16:28

score 1 · Answer 2 · answered Jan 11 '11 at 10:23

Just try to send the data as name/value pair (which is expected). Like

var query = ["data1","data2"];
// in between I add some values to 'query'
$.ajax({
    url: "MyServlet", 
    data: {'query' : query},
    success: function(noOfResults) { 
    alert(noOfResults); 
    }
  });
}

You should get the data at server side like this

query => Array ( [0] => data1 [1] => data2 )

As per the jQuery documentation for data setting of jQuery.Ajax() method

If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting

If the `data` parameter is not a string, jQuery uses the `jQuery.param` method to serialize it; if `jQuery.param` receives an Array, it must be an array of objects in the format returned by .serializeArray(). (`[{name:"first",value:"Rick"}, {name:"last",value:"Astley"}, {name:"job",value:"Rock Star"}]`); http://api.jquery.com/jQuery.param — Matt, Jan 11 '11 at 10:31

How do you send an array as part of an (jquery) ajax request

2 Answers2

Linked