XMLHttprequest sends an empty post

Question

I'm using the following code to send a request:

var ajaxHandler = new XMLHttpRequest();

ajaxHandler.onreadystatechange = function()
{
   if(ajaxHandler.readyState == 4)
   {
      console.log(ajaxHandler.responseText);
   }
}

ajaxHandler.open("POST", "filterCards", true);
ajaxHandler.send("category="+category+"&tag="+tag);

On the PHP side, I have this:

var_dump($_POST);

However, even though both the variables of category and tag have values, the console logs an empty array. What am I doing wrong with the post?

Answer 1

Add setRequestHeader before your send call:

ajaxHandler.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajaxHandler.send("category="+category+"&tag="+tag);

Replace:

   if(ajaxHandler.readyState == 4)
   {
      console.log(ajaxHandler.responseText);
   }

with

   if(ajaxHandler.readyState == 4 && ajaxHandler.status==200)
   {
      console.log(ajaxHandler.responseText);
   }

Hope this helps.

Answer 2

The answer by web-nomad is correct, but if you are still receiving an empty array, recall whether you are hiding file extensions in your server configuration. If you are, then a request to "file.extension" will be redirected to "file", and the POST data is lost.

This is a small error to make, but also easy to overlook. It is easy to assume the error is in the code rather than in the URL, particularly as the array is returned at all - so one might think the URL is correct.