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?

Answer 1

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:)