Pass array items as multiple params in jQuery AJAX POST

Question

I have an array of id's which I wish to pass as a parameter to a webservice via jQuery's $.post like so:

var selections = [1,2,3,4];

$.post('/save', {ids: selections, function(data) {
    // do something
});

Unfortunately the code above submits multiple parameters (which is what I want) but it appends a '[]' to the parameters name so the params sent through when inspected with firebug look like:

ids[] 1
ids[] 2
ids[] 3
ids[] 4

The size of the array is dynamic so I can't hardcode it. Is there a dynamic way to do this without creating a parameter string manually?

Thanks, gearoid.

EDIT:

I should also mention that I'm submitting to a Jersey Webservice method which looks like the following:

@POST 
@Path("save")
@Produces({"application/xml","application/json"})
@Consumes("application/x-www-form-urlencoded")
public Response save();

Jasper · Accepted Answer · 2011-11-08 17:30:57Z

1

Here is an example of dynamically creating a paremeter string using jQuery: http://jsfiddle.net/rre47/4/

var arr = {'ids' : []};//create new object (empty)

The basic idea is to create an object with an array under the 'ids' key. Then iterate through your data to append data to this array:

arr.ids.push(<some value>);

Then to output the parameter string:

decodeURIComponent($.param(arr));

answered Nov 8, 2011 at 17:30

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Armin Cifuentes · Accepted Answer · 2011-11-08 17:32:05Z

1

Maybe the jQuery function $.param() is what you need:

http://api.jquery.com/jQuery.param/

answered Nov 8, 2011 at 17:32

Armin Cifuentes

5151 gold badge7 silver badges17 bronze badges

Comments

Mondo · Accepted Answer · 2011-11-08 17:40:42Z

1

Use JSON encoding:

var selections = [1,2,3,4];
$.post('/save', {ids: selections}, function(data) {
    // do something
},
"json");

From jQuery's post

This would create a string: '{"ids": [1,2,3,4]}' and send that to the server.

And you seem to have a typo in your question:

$.post('/save', {ids: selections, function(data) {

should be:

$.post('/save', {ids: selections}, function(data) {

edited Nov 8, 2011 at 17:40

answered Nov 8, 2011 at 17:31

Mondo

3271 silver badge5 bronze badges

Comments

Ilya Kharlamov · Accepted Answer · 2014-10-14 20:27:33Z

1

Use traditional AKA "shallow" serialization as described here http://api.jquery.com/jQuery.param/.

The result at the first "level" will be without the brackets.

$.ajax({
    url : '/save',
    data : {
        ids: selections
    },
    traditional : true
});

answered Oct 14, 2014 at 20:27

Ilya Kharlamov

3,9912 gold badges35 silver badges36 bronze badges

Comments

maxedison · Accepted Answer · 2011-11-08 17:30:08Z

0

I would simply use the Array method .join to create a string out of the array, and then use PHP's explode function to convert it back into an array:

JS:

var selectionsString = selections.join('|'); //returns '1|2|3|4'

$.post('/save', {ids: selectionsString, function(data) {
    // do something
});

PHP:

$selectionsArray = explode('|', $_POST['ids']); //returns [1,2,3,4]

answered Nov 8, 2011 at 17:30

maxedison

17.6k15 gold badges72 silver badges118 bronze badges

4 Comments

maxedison Over a year ago

Fine Gearoid. But surely there is a similar method for whatever you ARE using, or one could be created without too much trouble.

Gerard Over a year ago

Of course, but you're also suggesting I put client specific code in my service layer. You're suggesting I write code in my API that handles different input formats which isn't the API's job. Assume that I'm not even allowed to touch the web service code.

maxedison Over a year ago

Why should I assume these things? You never said them until now.

Gerard Over a year ago

So you'd like me to write "Assume I want to keep my server side code loosely coupled from my client side?"

Collectives™ on Stack Overflow

Pass array items as multiple params in jQuery AJAX POST

5 Answers 5

Comments

Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related