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?

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.

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");?

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);
         }
     });
});

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).