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
– Jay Blanchard, Commented Apr 29, 2020 at 14:52
Try to change the send function to ajax.send("user=hello&password=there") and see what you get — Aaron
– Aaron, Commented Apr 29, 2020 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
– ADyson, Commented Apr 29, 2020 at 14:57

Aaron · Accepted Answer · 2020-04-29 15:48:22Z

2

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

edited Apr 29, 2020 at 15:48

answered Apr 29, 2020 at 15:29

Aaron

1,7471 gold badge10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ADyson Over a year ago

Note that the PHP side has to be changed too, in order to read incoming JSON data - see stackoverflow.com/questions/18866571/receive-json-post-with-php

Collectives™ on Stack Overflow

PHP not receiving any data from XMLHttpRequest

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related