Posting JSON with jquery ajax to PHP

Question

I have a simple php file that decode my json string, passed with ajax, and stamp the result, but I can't keep the $_POST variable, why???

I try to inspect with fireBug and I can see that the POST request is sent correctly, when the php script is called, he respond Noooooooob to me, it seem any POST variable is set.

All I want is to have my array =)

JSON String generated by JSON.stringify :

[
   {
      "id":21,
      "children":[
         {
            "id":196
         },
         {
            "id":195
         },
         {
            "id":49
         },
         {
            "id":194
         }
      ]
   },
   {
      "id":29,
      "children":[
         {
            "id":184
         },
         {
            "id":152
         }
      ]
   },
   ...
]

JavaScript

$('#save').click(function() {
  var tmp = JSON.stringify($('.dd').nestable('serialize'));
  // tmp value: [{"id":21,"children":[{"id":196},{"id":195},{"id":49},{"id":194}]},{"id":29,"children":[{"id":184},{"id":152}]},...]
  $.ajax({
    type: 'POST',
    url: 'save_categories.php',
    dataType: 'json',
    data: {'categories': tmp},
    success: function(msg) {
      alert(msg);
    }
  });
});

save_categories.php

<?php
  if(isset($_POST['categories'])) {
    $json = $_POST['categories'];
    var_dump(json_decode($json, true));
  } else {
    echo "Noooooooob";
  }
?>

Answer 1

Your code works if you remove dataType: 'json' , just tested it.

$('#save').click(function() {
  var tmp = JSON.stringify($('.dd').nestable('serialize'));
  // tmp value: [{"id":21,"children":[{"id":196},{"id":195},{"id":49},{"id":194}]},{"id":29,"children":[{"id":184},{"id":152}]},...]
  $.ajax({
    type: 'POST',
    url: 'save_categories.php',
    data: {'categories': tmp},
    success: function(msg) {
      alert(msg);
    }
  });
});

Answer 2

dataType is json, so jQuery posts this:

{"categories":"[{\"id\":21,\"children\":[{\"id\":196},{\"id\":195},{\"id\":49},{\"id\":194}]},{\"id\":29,\"children\":[{\"id\":184},{\"id\":152}]},...]"}

This is not standard urlencoded, so $_POST is empty.

You can set data to your complex structure, and jQuery will correctly encode it:

$('#save').click(function() {
  $.ajax({
    type: 'POST',
    url: 'save_categories.php',
    dataType: 'json',
    data: $('.dd').nestable('serialize'),
    success: function(msg) {
      alert(msg);
    }
  });
});

And in php: $categories = json_decode(file_get_contents('php://stdin'));

Answer 3

it's work for me you can try this. JavaScript

$('#save').click(function() { $.ajax({ type: 'POST', contentType: 'application/json', url: 'save_categories.php', dataType: 'json', data: JSON.stringify({'categories': $('.dd').nestable('serialize')}), success: function(msg) { alert(msg); } }); });

you need to write the below code on save_categories.php $_POST is pre-populated with form data.

To get JSON data (or any raw input), use php://input.

$json = json_decode(file_get_contents("php://input"));
$categories = $json->categories;

Answer 4

Try this:

$('#save').click(function() {
  var tmp = JSON.stringify($('.dd').nestable('serialize'));
  // tmp value: [{"id":21,"children":[{"id":196},{"id":195},{"id":49},{"id":194}]},{"id":29,"children":[{"id":184},{"id":152}]},...]
  $.ajax({
    type: 'POST',
    url: 'save_categories.php',
    dataType: 'json',
    data: 'categories=' + encodeURIComponent(tmp),
    success: function(msg) {
      alert(msg);
    }
  });
});

I changed just this line:

data: 'categories=' + encodeURIComponent(tmp),

because thats the way, how you have to write data there. I tested it, its working...