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.

Specifically, this answer is very intriguing and uses a simple, modern syntax (but perhaps not compatible with all browsers) — Jonathan Lam
– Jonathan Lam, Commented Aug 18, 2018 at 0: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
– szpanel, Commented Aug 18, 2018 at 0:30

Jonathan Lam · Accepted Answer · 2018-08-18 01:02:20Z

3

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

edited Aug 18, 2018 at 1:02

answered Aug 18, 2018 at 0:49

Jonathan Lam

17.5k17 gold badges72 silver badges99 bronze badges

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

1 Comment

szpanel Over a year ago

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

Collectives™ on Stack Overflow

Values from vanilla JavaScript to PHP using AJAX

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