Can't pass Javascript array to PHP via Ajax

Question

I've been tearing my hair out at such a simple problem. I have the following JS array:

 var orderDetailsArray = new Array();
 orderDetailsArray[0] = 'test 1';
 orderDetailsArray[1] = 'test 2';
 orderDetailsArray[2] = 'test 3';
 orderDetailsArray[3] = 'test 4';

Then I have the following Ajax code to send this array to a PHP file

 $.ajax({ 
 type: "POST",
 url: 'http://testdomain.com/file.php',
 data: JSON.stringify(orderDetailsArray),
 contentType: "application/json",
 success: function(data) {
 alert(data);
 }
 });

In my PHP file I have the following

 $orderDetailsArray = json_decode($_POST['orderDetailsArray']); 
 echo $orderDetailsArray[0]; 

But for some reason alert(data) always just returns blank. I have no idea why this doesn't return the correct values.

Any help would be really great.

Thanks

• Musa: So do you want to send JSON or receive url encoded form data?

Answer 1

You did not name your array in the client side before sending it, therefore the whole of $_POST is this array, and $_POST['orderDetailsArray'] is undefined.

You must name it client-side:

$.ajax({ 
 type: "POST",
 url: 'http://testdomain.com/file.php',
 data: {
 orderDetailsArray: JSON.stringify(orderDetailsArray)
 },
 contentType: "application/json",
 success: function(data) {
 alert(data);
 }
});

• user2028856: Um I'm still getting an empty response alert with this

Answer 2

data: { orderDetailsArray: JSON.stringify(orderDetailsArray)}

Answer 3

Your post data is not a key value pair, so you cant access in via key in php.

Either use the php input stream:

$orderDetailsArray = json_decode(file_get_contents('php://input'));

OR set a key in your ajax:

data: { orderDetailsArray: JSON.stringify(orderDetailsArray)}

• user2028856: Um I'm still getting an empty response alert with this
• Musa: For the second option your content type is incorrect.

Answer 4

You should declare array like this and then can directly pass it ajax. (No need to stringify)

var orderDetailsArray = {};
orderDetailsArray[0] = 'test 1';
orderDetailsArray[1] = 'test 2';
orderDetailsArray[2] = 'test 3';
orderDetailsArray[3] = 'test 4';
$.ajax({ 
 type: "POST",
 url: 'http://testdomain.com/file.php',
 data: {'order_details':orderDetailsArray},
 contentType: 'application/x-www-form-urlencoded',
 success: function(data) {
 alert(data);
 }
});

• Peter: I doubt that without stringify that it would would work. Post data is usually serialized when using ajax.
• Mad Angle: @Peter Its worked for me and thats why i have posted it. Using like this, we dont need convert it to array in PHP. We can directly access it as array in PHP. So $_POST['order_details'] is an array.
• Mad Angle: And i think its the easiest way. Otherwise we need to convert it into a string in the front end and then in the back end need to convert the string to array and then process:)
• Peter: by your code above, you created an object not an array, Which would work normally without stringify. But for an array, you have to either serialize or stringify it.

Answer 5

without dataType

data: {orderDetailsArray :orderDetailsArray},

with dataType

dataType: "json",
data: JSON.stringify({orderDetailsArray:orderDetailsArray}),

• user2028856: If I use dataType, do I still need to include contentType: "application/json", ?
• Punitha Subramani: I think no need if you use dataType: "json",
• Musa: @punithasubramaniv you're mixing up contentType with dataType, see stackoverflow.com/questions/13735869/…
• Punitha Subramani: yeah thats okay, I dint say strictly use only one. I said not necessary, If you use dataType. For the coding procedure you want to use all somthing like this contentType : "application/json", dataType: 'json'... But am using single dataType without using contentType also I can get the output. Thats why I suggested. Sorry If i confused.

Answer 6

well you cannot pass the value directly, you need to assign it to a "key" like this

data: {'arr':JSON.stringify(orderDetailsArray)},

and access the same at php side like this

$orderDetailsArray = json_decode($_POST['arr']);

Reference:

http://api.jquery.com/jQuery.ajax/

Happy Coding :)

Answer 7

The problem is in the data submitted. On the server side there's no data specified for $_POST['orderDetailsArray']

Change your ajax to:

$.ajax({ 
 type: "POST",
 url: 'http://testdomain.com/file.php',
 data: 'orderDetailsArray='+JSON.stringify(orderDetailsArray),
 contentType: "application/json",
 success: function(data) {
 alert(data);
 }
 });

Answer 8

Try change the data: data: JSON.stringify(orderDetailsArray)

//by

data: {orderDetailsArrayData:orderDetailsArray}

or

data: JSON.stringify({orderDetailsArrayData:orderDetailsArray})

// in php

$orderDetailsArray = $_POST['orderDetailsArrayData']; 
echo $orderDetailsArrayData[0];
or 
$orderDetailsArray = json_decode($_POST['orderDetailsArrayData']); 
echo $orderDetailsArrayData[0];