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

Question

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',
            });

Answer 1

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!

Answer 2

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).

Answer 3

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

This is a good place to start

Answer 4

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