JSON data response from PHP server is empty

Question

I'm having a hard time figuring this one out. Seems like no matter what I try, PHP always ends up returning an empty array. Here's the code of my main file(index.php):

<script language="javascript" type="text/javascript">

$(document).ready(function(){

  $(".ajaxlink").click(function() {
    callServer();
    return false; //Stop link from redirecting
  });

});

var test = { "testName": "testValue" }
var testJSON = JSON.stringify(test);

function updatePage(data) {
  document.getElementById("testDiv").innerHTML = data;
}

function callServer() {
 $.ajax({
   type: "POST",
   url: "ajax/server.php",
   data: testJSON,
   success: function(data) {
     updatePage(data);
   },
   //Upon error, output message containing a little info on what went wrong
   error: function (XMLHttpRequest, textStatus, errorThrown) {
     alert('An Ajax error occured\ntextStatus = ' + textStatus + '\nerrorThrown = ' + errorThrown + '\nstatus = ' + XMLHttpRequest.status);
   }
 });
}

</script>

<div id="testDiv">Something here</div>

<a href="test1.htm" class="ajaxlink">Link!</a> <br>

This basically runs the callServer() function when you click the "Link!". It then sends the test json data, that is { "testName": "testValue" } to server.php. Firebug reports that the json-data is indeed sent to the server.php.

My server.php looks like this:

<?php

print_r($_POST);

?>

This returns the following in the testDiv:

Array
(
)

The datatype in the .ajax function is not defined, so whatever output the server.php file spits out, it should be readable. All the necessary libraries(json, jquery) are included in my document as well. I'm running this on Apache 2.2 and PHP 5.3.1, but it shows the same on my webserver (which is a host for thousands of websites). The content-type used in the request-header is 'application/x-www-form-urlencoded; charset=UTF-8' so that should work correctly.

Thanks for your time. Best regards soren

Answer 1

Use firefox and Live Http Headers extension.
With this you'll be able to see exactly where the problem lies,
Php or Js code.

live http headers

Answer 2

I think you send the data in a wrong way. Either you send a string like testName=testValue or you assign the value in test directly to the data parameter of .ajax() and don't use the stringify method.

Because, if you use stringify, the actual sent data will be (I assume, I am not sure here):

'{ "testName": "testValue" }'

but this is not a valid parameter string.

It should be of form

'testName=testValue'

So use test directly, .ajax() will convert the object into an appropriate string:

function callServer() {
 $.ajax({
   type: "POST",
   url: "ajax/server.php",
   data: test,
   success: function(data) {
     updatePage(data);
   },
   //Upon error, output message containing a little info on what went wrong
   error: function (XMLHttpRequest, textStatus, errorThrown) {
     alert('An Ajax error occured\ntextStatus = ' + textStatus + '\nerrorThrown = ' + errorThrown + '\nstatus = ' + XMLHttpRequest.status);
   }
 });
}

Answer 3

I'm not sure your output from your PHP script is JSON formatted.

If you're using a newer version of PHP (which you are) you'll have access to the json_encode and json_decode functions. Instead of doing:

print_r($_POST);

Try:

print json_encode($_POST);

If your version of PHP doesn't have these functions you can use a library such as the Zend_Json class in the Zend Framework, in order to encode your PHP variables as JSON before outputting them.

And when it comes back, it'll be a JSON-formatted string. Setting the dataType in your jQuery.ajax call should evaluate it to a JS object. If not you would either have to call the Javascript eval function on it, or (preferably) use JSON.parse(data).