从 ajax（香草版）发送的数据不会存储在 PHP 的 $_POST 中

Question

I have this JS code ()

var obj = {
        first_name: 'cholo',
        last_name: 'yologs'
};
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("post", "recv.php"); 
xmlHttp.send(JSON.stringify(obj)); // or xmlHttp.send(obj);

and PHP code recv.php :

<?php
   $firstName = $_POST["first_name"];
   $lastName = $_POST["last_name"];
   echo $firstName." ".$lastName; 
?>

When I tried to run the page it says undefined index: first_name (and last_name ).
Is there other method without using file_get_contents('php://input') then json_decode() in PHP or sending data in FormData object in JS but to store sent data to $_POST automatically?

Edit:
I also wanted to know why I can't access through $_POST just like sending the data through a form

Answer 1

If you want to send a JSON-String representation, your PHP file should json_decode to convert it to a StdObject:

<?php
    $json = file_get_contents('php://input');
    $data = json_decode($json);
    echo $data->first_name ." ". $data->last_name;

and the JavaScript:

 const obj = { first_name: "cholo", last_name: "yologs" }; // FETCH fetch("recv.php", {method: 'POST', body: JSON.stringify(obj)}).then(res => res.text()).then(data => { console.log(data); // "cholo yologs" });

Otherwise, I suggest to use JavaScript FormData:

PHP file:

<?php
   $firstName = $_POST["first_name"];
   $lastName  = $_POST["last_name"];
   echo $firstName ." ". $lastName; 

JavaScript:

const obj = {
  first_name: "cholo",
  last_name: "yologs"
};

// Convert your Object literal to FormData

const FD = new FormData();
Object.entries(obj).forEach(([p, v]) => FD.append(p, v));

// XHR

const xmlHttp = new XMLHttpRequest();
xmlHttp.addEventListener("load", () => {
  if (xmlHttp.status == 200) {
    console.log(xmlHttp.responseText);   // "cholo yologs"
  } else {
    console.error("Error!");
  }
});
xmlHttp.open("post", "recv.php");
xmlHttp.send(FD); // Send the FormData

you should see finally "cholo yologs" in console.

Instead of XMLHttpRequest you could use the Fetch API:

const obj = {
  first_name: "cholo",
  last_name: "yologs"
};

// Convert your Object literal to FormData

const FD = new FormData();
Object.entries(obj).forEach(([p, v]) => FD.append(p, v));

// FETCH

fetch("recv.php", {method: "POST", body: FD})
  .then(res => res.text())
  .then(data => {
    console.log(data);   // "cholo yologs"
  });

• FormData
• Using FormData
• Fetch
• Using Fetch
• Can I Use: Fetch
• PHP json-decode