Sending a multi-level javascript object to the server with AJAX fails

Question

I have a javascript object that looks somthing like this:

var obj = {

    "name": "username",
    "userid": "9999",

    "object1": {
        "subObject1": {
            "subArray1": [],
            "subArray2": []
        },
        "subObject2": {
            "subArray3": [],
            "subArray4": []
        }
    },
    "object2": {
        "subObject3": {
            "subArray5": [],
            "subArray6": []
        }
    },
    "array1": [],
    "array2": []
};

I have tried to use a jQuery ajax call like this:

$.ajax({

    url: "test.php",
    type: "POST",
    dataType: "text",
    processData: false,
    data: obj,
    success: function(data, status) {

        alert("Sucsess");        
    }
});

The problem is that PHP doesn't receive anything. The $_POST variable is empty. I'm not sure what I'm doing wrong.

Thanks

Answer 1

I don't believe it is possible to send a data object like that.

If you wanted to do something like that you would have to serialize it before you send the data and then unserialize at the server. HTTP has it's limits.

Answer 2

Why not send it by using something like the json2 library to serialize the whole object as JSON, then send that via a single parameter? I don't know PHP but I would be stunned if there weren't dozens of alternative JSON parsers available.

Answer 3

First, include JSON2.js (Link at bottom of that page) on the page, then change your call to this:

$.post(
  "test.php", 
  data: JSON.stringify( obj ), 
  function(data, status) {
        alert("Sucsess");        
  });

Answer 4

Try out jQuery 1.4.1 the $.param function was completely rewritten to support things like this.