Values from vanilla JavaScript to PHP using AJAX

Question

I want to know how to send something to php using ajax and vanilla javascript. I ask you because I just found jQuery solution.

I know that if I want to recieve something it should looks like this:

var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      this.responseText; // This is my response
    }
  };
  xhttp.open("GET", "phpfile.php", true);
  xhttp.send();

Someone can explain or send me to solution because I couldn't find anything.

Is [this](https://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest) something like what you're looking for? — Jonathan Lam, Aug 18 '18 at 00:21
Specifically, [this answer](https://stackoverflow.com/a/45529553/2397327) is very intriguing and uses a simple, modern syntax (but perhaps not compatible with all browsers) — Jonathan Lam, Aug 18 '18 at 00:23
`xhttp.setRequestHeader('Content-type', 'application/json') http.send(JSON.stringify(params))` These are the two lines I need? In `params` Can I just write some variables after `,`? — szpanel, Aug 18 '18 at 00:30
I'm assuming it's the [MIME](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) type of the data, which the receiving end can use to determine what kind of data it's receiving. — Jonathan Lam, Aug 18 '18 at 00:33
Thank you and now I have to recieve this in PHP using `json_decode()`? If so, how should it look more or less? — szpanel, Aug 18 '18 at 00:38
Exactly! I'll write up a quick answer demonstrating how to use `JSON.stringify()` and `json_decode()`. — Jonathan Lam, Aug 18 '18 at 00:39

Jonathan Lam · Answer 1 · 2018-08-18T01:02:20.140

First method

To send data from JavaScript to PHP (or any other script) should be just as you found out:

xhttp.setRequestHeader('Content-type', 'application/json');
xhttp.send(JSON.stringify(params));

where params is some JavaScript variable. application/json is the datatype for JSON data.

On the PHP side, you were also correct: use JSON_decode() to get a PHP-equivalent to the JavaScript data you sent.

Second method (only for GET requests)

GET data is encoded in the URL, so an alternative way is to encode the data directly into the URL of the PHP script. (Don't do this for sensitive data.)

Javascript:

xhttp.open("GET", "phpfile.php?x=2&y=3&z=4");

PHP:

$x = $_GET["x"];
$y = $_GET["y"];
$z = $_GET["z"];

Because you seemed unclear on how to send multiple variables using the first method:

If you want to send multiple variables, put it into an object or array (because JSON.stringify() only takes one (data) argument, not a comma-separated list of arguments).

// for example, to send the variables x, y, z
var xValue = 2;
var yValue = 3;
var zValue = 4;
xhttp.setRequestHeader('Content-type', 'application/json');
xhttp.send(JSON.stringify({ x: xValue, y: yValue, z: zValue }));

PHP:

$data = json_decode($_GET);
echo $data->x;  // 2
echo $data->y;  // 3
echo $data->z;  // 4;

(disclaimer: code is untested; I'm not sure if data is received into the $_GET variable. Use json_decode() on the variable that PHP receives JSON data from.)

I will try it later now I need to go. You explained it as if I wanted it. Thank you so much :) There is a mistake. I am sorry for that. `http.send(JSON.stringify(params));` . `xhttp.send(JSON.stringify(params));` — szpanel, Aug 18 '18 at 00:56

Values from vanilla JavaScript to PHP using AJAX

1 Answers1

Linked