CODEWITHSUNDEEP
javascriptjqueryajaxarrayspost
Rowan
Rowan

Reputation: 463

passing data in javascript array to server with jQuery.ajax post function?

I was wondering if its possible to pass data stored in a javascript array to the server using jQuery's ajax function..

In the jQuery documentation it specifies:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

can "data" be set to an array? How would this work given it seems data is expecting key value pairs? I currently just hard code the values but I want it to be a more dynamic approach..my current code is:

jQuery.ajax({
            url: "/createtrips/updateitin",
            type: 'POST',
            data: {place1: 'Sydney', place2: 'London'},
            dataType: 'json',
            });

Upvotes: 7

Views: 13360

Answers (4)

Rowan
Rowan

Reputation: 463

I created an array like this: 

var placesfortrip = {};

then added to it like this:

placesfortrip["item"+counter] = inputVal;

(where counter is an incremented counter variable) then assigned this to the data property of the ajax call

 jQuery.ajax({
            url: "/createtrips/updateitin",
            type: 'POST',
            data: placesfortrip,
            dataType: 'json',
            });

and if I look at the XHR tab in firebug it appears those values get posted!

Upvotes: 8

Derk Arts
Derk Arts

Reputation: 3460

Check out jQuery serialize: http://api.jquery.com/serialize/

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});
This produces a standard-looking query string:

a=1&b=2&c=3&d=4&e=5

Upvotes: 0

Travis J
Travis J

Reputation: 82267

I believe you would like to look into using JSON to pass those values.

This is a good place to start

Upvotes: 0

Kevin Ji
Kevin Ji

Reputation: 10489

Yes, jQuery.ajax() supports the passing of arrays. It simply serializes the array into a name-value string.

If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).

Upvotes: 2

Related Questions