PHP not receiving any data from XMLHttpRequest

Question

I cannot seem to send any POST data to a PHP file via XMLHttpRequest. I have read many questions like this one but everyone had a different issue - none of them seem to be the case here.

I have boiled these two files down to their absolute core basics and it is still is not receiving any POST data. I have done this the exact same way in plenty of other instances before and I'm not sure how this one is any different.

index.php

...
<button id="login-button">Log in</button>
...

Javascript:

function login() {
  let ajax = new XMLHttpRequest();
  ajax.open('POST', 'login.php', true);
  ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
  ajax.onload = function() {
      alert(this.response);
  };
  ajax.send({user:'hello', password:'there'});
}
document.getElementById('login-button').addEventListener('click', login)

login.php:

var_dump($_POST);

The alert message with the output, every single time, simply reads:

array(0) {
}

The JS and PHP are both in the same folder of the same website on the same server, running PHP 7 if that matters. What could I possibly be doing wrong here?

Have you opened the browser's developer tools and had a look at the network tab? — Jay Blanchard, Apr 29 '20 at 14:52
Try to change the send function to ajax.send("user=hello&password=there") and see what you get — Aaron, Apr 29 '20 at 14:52
`ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');` tells the server to expect url-encoded data, but then you've sent something else (which I assume is maybe an attempt to send JSON data, but isn't valid as such). — ADyson, Apr 29 '20 at 14:57
@Aaron That does work! Why isn't it working with the object notation in this case? That's what I use everywhere else. — Henry Floyd, Apr 29 '20 at 15:19
@HenryFloyd because it expects your data be url-encoded format and NOT an object of whatever kind. Do some googling and you will find a way to send JSON data as well :) — Aaron, Apr 29 '20 at 15:23
However I will add an answer just in case somebody is looking for a ready to use answer — Aaron, Apr 29 '20 at 15:24

Aaron · Accepted Answer · 2020-04-29T15:48:22.023

By using ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); you basically tell your request to expect url-encoded data.

Lets keep it very simple, you want to submit a username and password.

So the request should look like this ajax.send("username=hello&password=there")

In your sample code you tried to send I dont know what kind of object-notation. The go-to way to exchange data between frontend and backend is JSON.

To modify your example to work with json modify it in the following way:

ajax.setRequestHeader("Content-Type", "application/json");
let data = JSON.stringify({"username": "hello", "password": "there"});
ajax.send(data);

To get an object out of a valid JSON string you can use the json parse method pe this helps you out :)

Note that the PHP side has to be changed too, in order to read incoming JSON data - see https://stackoverflow.com/questions/18866571/receive-json-post-with-php — ADyson, Apr 29 '20 at 15:32

PHP not receiving any data from XMLHttpRequest

1 Answers1