Send JSON data to PHP using XMLHttpRequest w/o jQuery
json, php, post, xmlhttprequest
Solution
You forgot to name your variables in the send function. The good way to use it is
x.send('name1='+string+'&name2=value2');
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")
Problem
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: ``` <?php print_r($_POST); print_r($_GET); 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 `file_get_contents`. How does that happen? What am I doing wrong? output of echo.php ``` Array ( ) Array ( ) 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: {{..to much data..}} Pragma: no-cache Cache-Control: no-cache {"type":"my_type","comment":"commented"} ``` the sending function: ``` function submit(){ var data={}; data.type=document.form.type.value; data.comment=document.form.comment.value; //get right XMLHttpRequest object for current browsrer var x=ajaxFunction(); var string = JSON.stringify(data); x.open('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); return; } data.resp = JSON.parse(x.responseText); if(data.resp.status=='success'){ alert('That worked!'); }else{ alert('That didn\'t work!'); } } x.send(string); return false; //prevent native form submit } ```