post an array using jquery ajax

Question

I am trying to do something fairly simple but I can't seem to find the solution. I want to post a multi-dimensional array to a php page using jQuery's .ajax function, but I can't seem to serialize the array properly.

The code is as follows

var dataToSend = new Array();
  dataToSend["page"] = location.href;
  dataToSend["data"] = new Array();
  var dataindex = 0;
  jQuery(".myclass").each(function(){
      dataToSend["data"][dataindex]=new Array();
      dataToSend["data"][dataindex]["selector"] = unique_selector(jQuery(this), "");
      dataToSend["data"][dataindex]["contents"] = jQuery(dataToSend["data"][dataindex]["selector"]).html();
  });
  jQuery.ajax({
      type: 'POST',
      url: "/main/save.php",
      data: JSON.stringify(dataToSend),
      dataType: "json",
      success: function(data){alert(data);}
  });

basically I am not sure how to properly pass the dataToSend array. Right now firebug show the post as empty even though the array is loaded with all kinds of good stuff.

Thanks,

Daniel

Answer 1

You're defining new Array();, but you're using them as new Object(). Try using objects.

Try this:

var dataToSend = { 
    page: location.href, 
    data: []
};
var dataindex = 0;
jQuery(".myclass").each(function(){
    var temp = unique_selector(jQuery(this), "");
    dataToSend.data[dataindex++] = {
        selector: temp,
        contents: jQuery(temp).html()
    };
});
jQuery.ajax({
    type: 'POST',
    url: "/main/save.php",
    data: JSON.stringify(dataToSend),
    dataType: "json",
    success: function(data){ alert(data); }
});