Sending js Array Object in jQuery AJAX Post

The post name should be "Serializing to JSON in jQuery" or something like that but I kind of twisted it the way I faced this issue. If you’re looking for how to do the Ajax calling in jQuery and blah da… then you should keep Googling because this post ain’t come any help on that. This post is basically about how to send an Array object as parameter in jQuery Ajax calling.

You must know how to serialize an object to JSON in ASP.NET AJAX, but if we need to send an array from the client, I couldn’t find any Microsoft-specific way to do that.

The specific situation – We have an array defined in JavaScript something like this:

var cities = new Array();
cities[0] = ‘dhk’;
cities[1] = ‘ctg’;
…

and then we need to turn this into a string to pass to $.ajax() like this:

$.ajax({
type: "POST",
url: "Cities.aspx/GetCities",
data: "{‘cities’:['dhk','ctg']}",
…

Yes, there are a number of JSON libraries out there, but you might want to try the jQuery plug in written by Mark Gibson to avoid introducing a new dependency: http://jollytoad.googlepages.com/json.js.

It adds the two functions: $.toJSON(value), $.parseJSON(json_str, [safe]) to parse your object into JSON.

So basically, this is what you would do:

• Create your array and serialize it into JSON
• Send it to your web-method
• Receive it in server side as string with comma delimiter
• Split the string and put the values into an array