Can't send JSON as string via AJAX

Question

So I'm trying to send a JSON as a string. Then I have a PHP back-end that retrieves this JSON string and parses it using json_decode .

Unfortunately, I can't get to send this JSON as a string.

Here's the jQuery Ajax script I used:

var jsonString = JSON.stringify(checkables);
console.log(jsonString);

$.ajax({
    url: $url,
    type: 'POST',
    data: {ajaxidate: JSON.stringify(jsonString)},
    contentType: "application/json; charset=UTF-8",
    success: function (data)
    {
        // just successful callback
    },
    error: function ()
    {
        // just error callback
    }
});

Variable checkables contains raw form as JSON data:

After applying JSON.stringify() , this is now how it looks: [{"name":"name","type":"multialphanumslug","value":"AD"},{"name":"server","type":"host","value":"10.1.1.1"},{"name":"port","type":"number","value":"8080"},{"name":"authid","type":"username","value":"barryallen"}]

At the back-end, I have this PHP script:

<?php
    var_dump($_POST);
    die();
?>

Now I suppose $_POST at back-end should now contain this:

array( 'ajaxidate' => "[{\\"name\\":\\"name\\",\\"type\\":\\"multialphanumslug\\",\\"value\\":\\"AD\\"},{\\"name\\":\\"server\\",\\"type\\":\\"host\\",\\"value\\":\\"10.1.1.1\\"},{\\"name\\":\\"port\\",\\"type\\":\\"number\\",\\"value\\":\\"8080\\"},{\\"name\\":\\"authid\\",\\"type\\":\\"username\\",\\"value\\":\\"barryallen\\"}]" );

But it didn't receive anything. Here's the captured request:

The response from back-end?

I tried with POSTMan and I received an expected correct output:

Now that was ridiculous.

I'm stuck at this for 2 days trying to figure out what's going on or what did I miss. Any help will be greatly appreciated.

Answer 1

You need to parse the data on the server:

$myArray = json_decode($_POST['ajaxidate']);
var_dump($myArray);

Consider this:

<?php
    $a = '[{"a": 1}]';
    $b = json_decode($a);
    var_dump($a);
    var_dump($b);
?>

Output:

string(10) "[{"a": 1}]"
array(1) {
  [0]=>
  object(stdClass)#1 (1) {
    ["a"]=>
    int(1)
  }
}

dataType: 'json' , tldr: Use It!

When setting dataType = json you tell jQuery that the response from the server should be interpreted as JSON and it will therefore parse it for you and give the parsed object / array as first argument to the success callback:

$.ajax({
   // ...
   dataType: 'json',
   success: function(myJson) {
     console.log(myJson); // this will be a JSON object/array...
   }
});

Answer 2

As you mention dataType: json in your ajax call data need to be in json formate but using JSON.stringify convert Json object to json String that with make problem for you need to change

 `var jsonString = JSON.stringify(checkables);`

to

 var jsonString = checkables;

JSON.stringify()

Answer 3

Solved my own problem. Having @Munna suggested to use $.post() made me figure out to eliminate the unnecessary. From that case, the unnecessary is contentType option from $.ajax().

This is the updated working solution:

$.ajax({
    url: $url,
    type: 'POST',
    data: {ajaxidate: JSON.stringify(jsonString)},
    success: function (data)
    {
        // just successful callback
    },
    error: function ()
    {
        // just error callback
    }
});

Thanks everyone who helped. Have a good day