Send multidimensional arrays to PHP with jQuery and AJAX

Tim White — Sat, 26 Dec 2009 14:48:46 +0000

javascript array

AJAX communication between the client browser and web server is a handy method of transferring data without forcing the user to refresh the page. Typically, the data sent to the server is a simple set of form fields or flags. However, it is also possible to submit more complex structured data. This tutorial will demonstrate 3 different methods used to pass multidimensional javascript arrays using jQuery and AJAX to a PHP web server.

The Wrong Way

My first instinct was that multidimensional JS arrays could be passed directly to jQuery's AJAX functions. I expected that the array would be automatically preserved in the request, and show up in PHP's $_GET/$_POST variables. The following example shows this doesn't work.

The code below attempts to post a JS associative array ("data", line 9) to the web server using jQuery's $.ajax() function. The $.ajax() function is jQuery's lowest level AJAX function, but still provides a high level approach and lots of options.



    
        
        jQuery AJAX arrays

When the button is clicked, the following data shows up in PHP's $_POST variable:

Array
(
    [foo] => 123
    [bar] => 456
    [rows] => [object Object]
    [test1] => [object Object]
)

As shown, the first level of the array data is preserved (keys "foo" and "bar"). However, jQuery simply calls .toString() on the nested arrays at keys "rows" and "test1", and they get passed to PHP with the useless values "[object Object]".

Method 1 - Form input arrays

It's possible to name the keys of the JS array as HTML form input arrays (ie. named with square brackets) so that PHP decodes the array's key names as nested arrays. I don't recommend this method because it does not maintain the JS array's original structure in the Javascript. However, it can be used if you just need to get the AJAX request working without using JSON.

The original JS "data" array can be renamed/restructured as:

sendAjax = function(){
	var data = {
				  foo:  123,
				  bar:  456,
				  'rows[0][column1]':    'hello',
				  'rows[0][column2]':    'hola',
				  'rows[0][column3]':    'bonjour',
				  'rows[1][column1]':    'goodbye',
				  'rows[1][column2]':    'hasta luego',
				  'rows[1][column3]':    'au revoir',
				  'test1[test2][test3]': 'baz'
				};
	$.ajax({
			type:           'post',
			cache:          false,
			url:            './ajax/',
			data:           data
		   });
}

And the data is correctly received in PHP's $_POST variable:

Array
(
    [foo] => 123
    [bar] => 456
    [rows] => Array
        (
            [0] => Array
                (
                    [column1] => hello
                    [column2] => hola
                    [column3] => bonjour
                )

            [1] => Array
                (
                    [column1] => goodbye
                    [column2] => hasta luego
                    [column3] => au revoir
                )
        )

    [test1] => Array
        (
            [test2] => Array
                (
                    [test3] => baz
                )
        )
)

Method 2 - JSON string parameter

This method converts the JS array to a JSON string, and passes it as a POST or GET parameter, which can be manually decoded back into an array by PHP. Modern browsers (Firefox 3, IE 8) now have a native JSON object that can be used to stringify JS arrays to JSON strings. The following example uses the YUI JSON utility to convert the JS array to a string ( json2 is another populary lightweight utility for handling JSON).

sendAjax = function(){
	var data = {
				  foo:  123,
				  bar:  456,
				  rows: [
						  {
							column1 : 'hello',
							column2 : 'hola',
							column3 : 'bonjour',
						  },
						  {
							column1 : 'goodbye',
							column2 : 'hasta luego',
							column3 : 'au revoir',
						  },
						],
				  test1:{
						  test2: {
								   test3:  'baz'
								 }
						}
				};
	data = YAHOO.lang.JSON.stringify(data);

	$.ajax({
			type:           'post',
			cache:          false,
			url:            './ajax/',
			data:           {myJson:  data}
		   });
}

On the PHP side, it's necessary to use json_decode() to convert the JSON $_POST parameter string (named "myJson") to an array:


And the array is good to go:
Array
(
    [foo] => 123
    [bar] => 456
    [rows] => Array
        (
            [0] => Array
                (
                    [column1] => hello
                    [column2] => hola
                    [column3] => bonjour
                )

            [1] => Array
                (
                    [column1] => goodbye
                    [column2] => hasta luego
                    [column3] => au revoir
                )
        )

    [test1] => Array
        (
            [test2] => Array
                (
                    [test3] => baz
                )
        )
)

Method 3 - JSON content-type
My favorite method is to simply JSON stringify the JS array, and pass it as the AJAX request's body.  This requires that the content-type of the request be changed from the default "application/x-www-form-urlencoded" to "application/json", and that $.ajax()'s processData parameter be set to false so that the JSON data is not converted into a query string.  Also, the type of request must be POST, as the GET method does not support submitting data in the request body.
sendAjax = function(){
	var data = {
				  foo:  123,
				  bar:  456,
				  rows: [
						  {
							column1 : 'hello',
							column2 : 'hola',
							column3 : 'bonjour',
						  },
						  {
							column1 : 'goodbye',
							column2 : 'hasta luego',
							column3 : 'au revoir',
						  },
						],
				  test1:{
						  test2: {
								   test3:  'baz'
								 }
						}
				};
	data = YAHOO.lang.JSON.stringify(data);

	$.ajax({
			type:           'post',
			cache:          false,
			url:            './ajax/',
			data:           data,
			processData:    false,
			contentType:   'application/json'
		   });
}

On the PHP side, it's necessary to manually read the JSON string directly from the request body using the php://input stream.  The returned string can then be decoded into an array:

Which gives us the array:
Array
(
    [foo] => 123
    [bar] => 456
    [rows] => Array
        (
            [0] => Array
                (
                    [column1] => hello
                    [column2] => hola
                    [column3] => bonjour
                )

            [1] => Array
                (
                    [column1] => goodbye
                    [column2] => hasta luego
                    [column3] => au revoir
                )
        )

    [test1] => Array
        (
            [test2] => Array
                (
                    [test3] => baz
                )
        )
)

Hopefully this tutorial has helped you get multidimensional array data passed to your webserver using AJAX.  If you know of another method, please submit it in the comments - thanks!

Zulius » jQuery

Send multidimensional arrays to PHP with jQuery and AJAX

The Wrong Way

Method 1 - Form input arrays

Method 2 - JSON string parameter

Method 3 - JSON content-type