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.

@Munna dataType: 'json' will parse the response - from the server - as JSON and give an object / array as first argument to the success callback — Andreas Louv
– Andreas Louv, Commented Nov 16, 2015 at 6:55
@Munna updated my question and removed the dataType: 'json', still not working — Allen Linatoc
– Allen Linatoc, Commented Nov 16, 2015 at 7:00

Andreas Louv · Accepted Answer · 2015-11-16 06:58:59Z

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

answered Nov 16, 2015 at 6:58

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

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

1 Comment

Allen Linatoc Over a year ago

Appreciate your help @dev-null but I'm done with the back-end part. I'm already finished designing it with complex processing procedures. And I already stated that in my question: "Then I have a PHP back-end that retrieves this JSON string and parses it using json_decode."

Shailendra Sharma · Accepted Answer · 2015-11-16 06:52:52Z

0

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

answered Nov 16, 2015 at 6:52

Shailendra Sharma

6,9922 gold badges30 silver badges48 bronze badges

8 Comments

Allen Linatoc Over a year ago

Thanks, but POST doesn't support sending multi-dimensional JSON objects

Novocaine Over a year ago

@AllenLinatoc Where did you read that information? It is absolutely possible to send multi dimensional JSON objects via ajax POST.

Allen Linatoc Over a year ago

@Novocaine yes it is possible to send JSON objects via AJAX as a string and requires json_decode() at PHP back-end (which I just did from my question), but not as JSON object itself to be sent directly via POST.

Novocaine Over a year ago

@AllenLinatoc that's not accurate. You will notice in the example I linked, data is not being converted into a string before the ajax call. If you're passing data that is already a JSON object, there is no need to JSON.stringify() it. Not only does the example show that, but I have done it this way successfully many times. It's worth noting this is only the case v1.4.0 and up.

Novocaine Over a year ago

@AllenLinatoc No I'm not referring to Method 1, 2 or 3. Those are all for versions below v1.4.0. If you are using 1.4.0 or above which like I said you should be, then you need only look at the very first example (the section BEFORE Method 1). Obviously the way you've done it now does work, but I'm trying to show you that there is a cleaner way to do it. Your current method is more complicated than it needs to be, both in client side and server side codes.

|

Allen Linatoc · Accepted Answer · 2015-11-16 09:25:35Z

0

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

edited Nov 16, 2015 at 9:25

answered Nov 16, 2015 at 7:16

Allen Linatoc

6447 silver badges17 bronze badges

Collectives™ on Stack Overflow

Can't send JSON as string via AJAX

3 Answers 3

1 Comment

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related