Problems with sending json data to server from javascript using the POST method

Question

I am trying to see the json data I sent to the server using XMLHttpRequest but it seems that the server is not receiving it, when I run the javascript the alert window will pop up but doesn't print anything. Anyone know how to solve this problem? Thanks

On the client side, Java script

var obj = {"action": "nothing"};

var jsonString = "jsonString=" + JSON.stringify(obj);


var xmlhttp = new XMLHttpRequest();

xmlhttp.open("POST","http://myserver/main.php",true);

xmlhttp.setRequestHeader("Content-type","application/json");
xmlhttp.setRequestHeader("Content-Length",jsonString.length);

xmlhttp.onreadystatechange = function() 
{           
      if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
          alert(xmlhttp.responseText);
      }
}
xmlhttp.send(jsonString);

On the server,php

if(isset($_POST['jsonString'])) 
echo $_POST['jsonString'];

application/x-www-form-urlencoded means that you have to urlencode the string: encodeURIComponent(JSON.stringify(obj)). You also should send a Content-Length: xmlhttp.setRequestHeader("Content-Length", jsonString.length);. And check the xmlhttp.status === 200 in xmlhttp.onreadystatechange. — Saxoier
– Saxoier, Commented Jun 23, 2011 at 5:15
@Saxoier Thank you I just edited my code according to your instructions but unfortunately it's still not working — totalnoob
– totalnoob, Commented Jun 23, 2011 at 5:50
Your first version has already worked. Maybe you redirect with apache's mod_rewrite (RewriteRule, ...) or mod_alias (Redirect, ...). Then you possibly make an additional GET-Request and loose all your POST-Data. Have a look at Firebug->Network. There shouldn't be a 3xx HTTP status code for this request. — Saxoier
– Saxoier, Commented Jun 23, 2011 at 12:49

carlosfigueira · Accepted Answer · 2011-06-23 04:51:50Z

1

You're sending JSON data, but the content-type is set to application/x-www-form-urlencoded. You should either send form/encoded data (var obj="action=nothing") or set the content-type to JSON (application/json)

answered Jun 23, 2011 at 4:51

carlosfigueira

87.7k14 gold badges137 silver badges176 bronze badges

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

1 Comment

totalnoob Over a year ago

Thank you I just changed it to application/json but it's still not working

SummaNerd · Accepted Answer · 2012-05-15 18:07:09Z

1

James' solution works just fine, but if you are looking to send data using the application/json content type then you have to access the data in a different way.

For what you have server side,

if(isset($_POST['jsonString'])) 
echo $_POST['jsonString'];

change this (like James did):

xmlhttp.setRequestHeader("Content-type","application/json");

to

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

IF YOU WOULD LIKE TO USE THE application/json content type then you must change how you access it server side with:

    $json_string = file_get_contents('php://input');
    $json_object = json_decode($json_string); 
    echo $json_object->action;

answered May 15, 2012 at 18:07

SummaNerd

3012 silver badges10 bronze badges

Comments

James · Accepted Answer · 2011-06-24 19:20:08Z

0

This is working for me:

<html>
<head>
<script src='json.js'></script>
</head>
<body>

<script>
var obj = {"action": "nothing"};
var jsonString = "jsonString=" + JSON.stringify(obj);
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","whereIPutThePHP.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-Length",jsonString.length);

xmlhttp.onreadystatechange = function() 
{           
      if(xmlhttp.readyState === 4 && (xmlhttp.status === 200)){
          alert(xmlhttp.responseText);
      } 
}
xmlhttp.send(jsonString);
</script>

</body>
</html>

answered Jun 24, 2011 at 19:20

James

22.4k5 gold badges29 silver badges44 bronze badges

Collectives™ on Stack Overflow

Problems with sending json data to server from javascript using the POST method

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related