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

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