Simon Simon - 9 months ago 54
JSON Question

Send JSON data to PHP using XMLHttpRequest w/o jQuery

I am trying to send JSON data from a form using the XMLHttpRequest object. I can send the data using the following function. There are no errors displayed in FireBug and the JSON-data in the request is displayed well formed by FireBug.

However, I send the data to echo.php, what simply returns the content:

foreach (getallheaders() as $name => $value) {
echo "$name: $value\n";
echo file_get_contents('php://input');

The POST-array is always empty, but I can see the JSON string returned by
. How does that happen? What am I doing wrong?

output of echo.php

Host: localhost
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: eo,de-de;q=0.8,de;q=0.6,en-us;q=0.4,en;q=0.2
Accept-Encoding: gzip, deflate
Connection: keep-alive
Content-Type: application/json; charset=utf-8
Referer: http://localhost/form.html
Content-Length: 88
Cookie: {{ much data..}}
Pragma: no-cache
Cache-Control: no-cache

the sending function:

function submit(){
var data={};

//get right XMLHttpRequest object for current browsrer
var x=ajaxFunction();

var string = JSON.stringify(data);'POST','echo.php',true);
x.setRequestHeader('Content-type','application/json; charset=utf-8');
x.setRequestHeader("Content-length", string.length);
x.setRequestHeader("Connection", "close");

x.onreadystatechange = function(){
if (x.readyState != 4) return;
if (x.status != 200 && x.status != 304) {
alert('HTTP error ' + req.status);

data.resp = JSON.parse(x.responseText);
alert('That worked!');
alert('That didn\'t work!');

return false; //prevent native form submit


You forgot to name your variables in the send function. The good way to use it is


Given that, I think you will have to change the content-length header. I don't think it is usefull to send it.

One another thing you can do is try with GET method. You can also try to change your content-type header by that one :

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