0

As the title states, I'm looking to make a POST request using JavaScript and also get a response. Here's my current code:

var request = new XMLHttpRequest();
request.open('POST', 'test.php', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success
    console.log(request.responseText)
  } else {
    // Server-side Error
    console.log("Server-side Error")
  }
};

request.onerror = function() {
    // Connection Error
    console.log("Connection Error")
};

request.send({
    'color':'red', 
    'food': 'carrot',
    'animal': 'crow'
});

With test.php being:

<?php 
    echo $_POST['color'];
?>

This should return 'red' but instead returns nothing.

This seems like a simple problem but I could only find solutions for people using jQuery. I'd like a solution that does not rely on and libraries.

073148974301870437087
  • 1
  • 1
  • **Danger**: This code is [vulnerable to XSS](https://www.owasp.org/index.php/XSS) User input needs escaping before being inserted into an HTML document!. – Quentin Aug 13 '17 at 18:53
  • **Warning**: `$_REQUEST` can be populated by the query string, post data or cookies. Naming conflicts (especially when cookies are involved) can cause confusion. It is best avoided in favour of the more explicit superglobals `$_COOKIES`, `$_POST` and `$_GET`. – Quentin Aug 13 '17 at 18:54
  • Yes, I know that this is vulnerable to XSS - I put this together quickly because I did not want to upload my real code. – 073148974301870437087 Aug 13 '17 at 19:06
  • All of the current solutions simply log the source code of "test.php" to the console as opposed to logging 'red' to the console. – 073148974301870437087 Aug 13 '17 at 19:06
  • That's a another issue and unrelated to your code: https://stackoverflow.com/questions/5121495/php-code-is-not-being-executed-instead-code-shows-on-the-page – Quentin Aug 13 '17 at 19:09

2 Answers2

0

The send method takes a string rather than an object, perhaps more like:

var request = new XMLHttpRequest();
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    console.log(request.response)
  } else {
    console.log("Server-side Error")
  }
};

request.onerror = function() {
    console.log("Connection Error")
};

request.open('POST', 'test.php', true);
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
request.send('color=red&food=carrot&animal=crow');
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Professor Abronsius
  • 33,063
  • 5
  • 32
  • 46
0

The JavaScript problem

You are trying to send a generic Object, so it gets converted to a String ("[Object object]"), and the data is lost.

Convert the data to a FormData object instead.

var data = {
    'color':'red', 
    'food': 'carrot',
    'animal': 'crow'
};

var formData = new FormData();

Object.keys(data).forEach(function (key) { 
  formData.append(key, data[key]);
})

request.send(formData);

The PHP problem

All of the current solutions simply log the source code of "test.php" to the console as opposed to logging 'red' to the console

This is an issue unrelated to your code. It is also a FAQ. See: PHP code is not being executed, instead code shows on the page

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335