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

and firebug that's what you're sending in query string parameters? — John
– John, Commented Nov 14, 2013 at 11:48
firebug tell me that the categories parameter is correctly passed, but when I access the $_POST it can't find. — The_Guy
– The_Guy, Commented Nov 14, 2013 at 13:24

melc · Accepted Answer · 2013-11-14 11:50:24Z

26

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

answered Nov 14, 2013 at 11:50

melc

11.7k3 gold badges39 silver badges42 bronze badges

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

1 Comment

The_Guy Over a year ago

This solution do exactly what i mean, thanks a lot @melc, I also add a preventDefault() because I used an <a href="..." html tag and it refresh the page without the result.

Vipin Kumar · Accepted Answer · 2017-08-08 08:54:50Z

5

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;

answered Aug 8, 2017 at 8:54

Vipin Kumar

711 silver badge4 bronze badges

1 Comment

s.k.paul Over a year ago

I think this should be the answer, specially for the php part. +1 from me.

Marek · Accepted Answer · 2013-11-14 11:55:19Z

4

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

edited Nov 14, 2013 at 11:55

answered Nov 14, 2013 at 11:50

Marek

7,4431 gold badge24 silver badges34 bronze badges

Comments

Legionar · Accepted Answer · 2013-11-14 11:44:10Z

0

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

answered Nov 14, 2013 at 11:44

Legionar

7,5993 gold badges45 silver badges71 bronze badges

1 Comment

Seain Malkin Over a year ago

This is no different than the ops code. jQuery will convert the object to a string just like you have anyway. The crucial part was probably the URL encoding and not passing the data property as a string.

Collectives™ on Stack Overflow

Posting JSON with jquery ajax to PHP

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest