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?

What do you get if you echo the $_POST['area'] variable in your PHP script (without running its value through json_decode())? — Jasper
– Jasper, Commented Jan 23, 2012 at 20:48
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? — Mike Rifgin
– Mike Rifgin, Commented Jan 23, 2012 at 20:56
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!). — Jasper
– Jasper, Commented Jan 23, 2012 at 21:05
I'm not following. I thought this was the correct way to do it? Any ideas how to get this working? — Mike Rifgin
– Mike Rifgin, Commented Jan 23, 2012 at 21:10
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']. — Jasper
– Jasper, Commented Jan 23, 2012 at 21:14

Jasper · Accepted Answer · 2012-01-23 21:06:15Z

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.

edited Jan 23, 2012 at 21:06

answered Jan 23, 2012 at 20:40

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mike Rifgin Over a year ago

Makes no difference unfortuantely

Mike Rifgin Over a year ago

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 Over a year ago

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] => '' )

Darin Dimitrov · Accepted Answer · 2012-01-23 20:40:14Z

1

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

answered Jan 23, 2012 at 20:40

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

1 Comment

Mike Rifgin Over a year ago

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

ShankarSangoli · Accepted Answer · 2012-01-23 20:41:00Z

1

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

answered Jan 23, 2012 at 20:41

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

1 Comment

Mike Rifgin Over a year ago

Makes no difference unfortunately

jjs9534 · Accepted Answer · 2012-01-23 21:08:48Z

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

Collectives™ on Stack Overflow

Sending json via jquery ajax not working

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related