Sending json via jquery ajax not working

Question

I'm making an AJAX request and sending along some JSON:

 $(function() {
 var json = [{"id":"1", "area":"south"}, {"id":"2", "area":"north"},{"id":"3", "name":"east"},{"id":"1", "name":"west"}];
 jQuery.ajax({
 url: "index.php",
 type: "POST",
 data: {areas: JSON.stringify(json) },
 dataType: "json",
 beforeSend: function(x) {
 if (x && x.overrideMimeType) {
 x.overrideMimeType("application/j-son;charset=UTF-8");
 }
 },
 success: function(result) {
 alert(result);
 }
 });

and then I'm trying to use json_decode on the other end to decode it in to something useful for PHP:

<?php
 if(isset($_POST['areas'])) {
 $json = $_POST['areas'];
 $obj = json_decode($json);
 var_dump($obj);
 exit;
 }
?>

The AJAX post gets made fine and if I put an echo inside the if(isset$_POST) I get it back so it seems it's getting sent. But I only get Null returned from the code. Can anyone see what I'm missing?

• Jasper: What do you get if you echo the $_POST['area'] variable in your PHP script (without running its value through json_decode())?
• Mike Rifgin: HI Jasper, If I print_r the post as you suggest I get an array back...Array ( [0] => Array ( [id] => 1 [area] => south ) [1] => Array ( [id] => 2 [area] => north ) [2] => Array ( [id] => 3 [name] => east ) [3] => Array ( [id] => 1 [name] => west ) ) this makes no sense to me though. It shouldn't be an array before I decode it right?
• Jasper: You are creating a string from an object; jQuery is then taking your string and converting it to a query-string parameter; PHP is then taking that query-string parameter and turning it back into an object. This is the same behavior as using [] in the name attributes for a form to create an array. It appears as though the issue is that you are trying to create an object from an object (you tried to do too much!).
• Mike Rifgin: I'm not following. I thought this was the correct way to do it? Any ideas how to get this working?
• Jasper: If when you print_r($_POST['areas']) you get the structure you want, just don't do anything to it, remove the $obj = json_decodE($json); line or change it to $obj = $_POST['areas'].

Answer 1

(削除) I believe you can just pass your json array directly to the AJAX function and skip the JSON.stringify function call:

$(function() {
 var json = [{"id":"1", "area":"south"}, {"id":"2", "area":"north"},{"id":"3", "name":"east"},{"id":"1", "name":"west"}];
 jQuery.ajax({
 url: "index.php",
 type: "POST",
 data: {areas: json },
 dataType: "json",
 beforeSend: function(x) {
 if (x && x.overrideMimeType) {
 x.overrideMimeType("application/j-son;charset=UTF-8");
 }
 },
 success: function(result) {
 alert(result);
 }
 });
});

(削除ここまで) UPDATE

If this is the output of the $_POST['area'] variable from the PHP script before running json_decode:

Array (
 [0] => Array ( [id] => 1 [area] => south )
 [1] => Array ( [id] => 2 [area] => north )
 [2] => Array ( [id] => 3 [name] => east ) 
 [3] => Array ( [id] => 1 [name] => west )
)

Then you don't need to run json_decode because you already have the object you want.

• Mike Rifgin: Makes no difference unfortuantely
• Mike Rifgin: Yes that's the case! But how? It makes little sense to me. I'm able to loop over and get results out also
• Jasper: The PHP parsing engine does this for you automatically. It's the same as making form inputs arrays by adding [] to the end of their name attributes (e.x. <input type="text" name="some_text[]" /><input type="text" name="some_text[]" />). Given these example inputs, PHP will give you an array like this: $_POST['some_text'] = Array ( [0] => '' [1] => '' )

Answer 2

How about:

$obj = json_decode($json, true);

Also shouldn't x.overrideMimeType("application/j-son;charset=UTF-8"); actually be x.overrideMimeType("application/json;charset=UTF-8");?

• Mike Rifgin: Hi, Thanks for the amend. I've made those changes but still get back NULL from my var_dump above

Answer 3

You don't have to use stringify jQuery will take care of it. Try this.

$(function() {
 var json = [{"id":"1", "area":"south"}, {"id":"2", "area":"north"},{"id":"3", "name":"east"},{"id":"1", "name":"west"}];
 jQuery.ajax({
 url: "index.php",
 type: "POST",
 data: {areas: json },
 dataType: "json",
 beforeSend: function(x) {
 if (x && x.overrideMimeType) {
 x.overrideMimeType("application/j-son;charset=UTF-8");
 }
 },
 success: function(result) {
 alert(result);
 }
 });
});

• Mike Rifgin: Makes no difference unfortunately

Answer 4

$(function() {
 var json = [{"id":"1", "area":"south"}, {"id":"2", "area":"north"},{"id":"3", "name":"east"},{"id":"1", "name":"west"}];
 jQuery.ajax({
 url: "index.php",
 type: "POST",
 data: {areas: JSON.stringify(json) },
 //dataType: "json",
 beforeSend: function(x) {
 if (x && x.overrideMimeType) {
 x.overrideMimeType("application/j-son;charset=UTF-8");
 }
 },
 success: function(result) {
 alert(result);
 }
 });

You are dumping a response that is not a json, the dataType parameter tells the function what type of response to expect. If you don't put anything, it will give you what you expect, a var_dump from the PHP script. (This was verified with the code you posted).