为什么我的 php POST 数组在一个实例中为空，而在另一个实例中都使用 XHR POST？

如何解决为什么我的 php POST 数组在一个实例中为空，而在另一个实例中都使用 XHR POST？

我正在尝试编写代码来检查用户名是否已被使用，并且我编写了一些测试代码，其中填充了我的 PHP $_POST 数组。但是，我针对正在开发的“生产”代码稍微修改了测试代码，并且我的 $_POST 数组为空。我的第一组代码，即工作，html文件是

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Testing XMLHttpRequest</title>
   <Meta charset="utf-8">
</head>
<body>
   <header>
      <h1>Testing XMLHttpRequest</h1>
   </header>
   <main>
      <form name="newUser">
         <label for="username">Username:</label>
            <input type="text" id="username" name="username">
         <p id="serverResponse"></p>
         <label for="password">Password:</label>
            <input type="password" name="password">
         </br>
         <label for="confirm">Retype Password:</label>
            <input type="password" name="confirm">
      </form>
   </main>
   <script src="index.js"></script>
</body>
</html>

第一组代码javascript文件

(function () {
   let usernameInput = document.querySelector("#username");
   let serverResponse = document.querySelector("#serverResponse");
   
   usernameInput.addEventListener("blur",function (event) {
      let username = event.target.value;
      
      if (username !== "") {
         let request = new XMLHttpRequest();
         request.open("POST",'validator.PHP',true);
         request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
         
         request.onreadystatechange = function() {
            if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
               serverResponse.innerHTML = this.responseText;
            }
         }
         
         request.send(`username=${username}`);
      }
      else {
         serverResponse.innerHTML = "";
      }
   });
}());

第一组代码 PHP 文件

<?PHP
   $username = $_POST['username'];
   echo $username;
?>

我修改后不起作用的代码如下。 html文件是

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Lunch Decider - New User Registration</title>
   <Meta charset="utf-8">
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <header>
      <h1>Lunch Decider</h1>
   </header>
   <nav>
      <ul>
         <li><a href="index.html">Home/Cancel</a></li>
      </ul>
   </nav>
   <main>
      <form action="newUser.PHP" method="POST" name="newUser">
         <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
            <button type="button" id="checkAvailabilityButton">Check Availability</button>
         <p id="availabilityResponse"></p>
         <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
         </br>
         <label for="checkPassword">Repeat Password:</label>
            <input type="password" id="checkPassword" name="checkPassword" required>
         </br>
         <button type="submit">Submit</button>
         <button type="reset">Reset</button>
      </form>
   </main>
   <script src="newUser.js"></script>
</body>
</html>

无效代码的javascript文件是

(function () {
   let checkAvailabilityButton = document.querySelector("#checkAvailabilityButton");
   let username = document.querySelector("#username");
   let availabilityResponse = document.querySelector("#availabilityResponse");
   
   checkAvailabilityButton.addEventListener("click",function(event) {
      if (username.value === "") {
         alert("You must first enter a username.");
      }
      else {
         let xhr = new XMLHttpRequest();
         xhr.open("POST","checkAvailability.PHP",true);
         xhr.setRequestHeader("Content-type","application/x-www-url-formencoded");
         
         xhr.onreadystatechange = function() {
            if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
               availabilityResponse.innerHTML = this.responseText;
            }
         };
         
         xhr.send(`username=${username.value}`);
      }
   });
   
}());

最后我不起作用的PHP 代码是

<?PHP
   $username = $_POST['username'];
   echo $username;
?>

不确定我在第二组代码中哪里出错了。我尝试将我的数据放入 FormData 对象并将其传递给 XHR.send() 方法。我意识到我已经将第一组代码从我直接感兴趣的输入上的“模糊”事件切换到我的第二组代码，其中我的主要事件是单击“checkAvailability”按钮，但我不能看看哪里会使我的 $_POST 数组不接受发送的值。在这两种情况下，我都可以在请求中看到 username=nameEntryFromInputTextBox 的位置。请看一看并提出建议。

解决方法

不确定 xhr.send 是否以 JSON 格式发送，但无论如何，请尝试使用以下命令捕捉帖子：

$post = json_decode(file_get_contents("php://input"));
// will make an object - $post->var
$post = json_decode(file_get_contents("php://input"),true);
// will make an array - $post['var']

PHP "php://input" vs $_POST

我有一个错字，在我的代码不起作用时，我将 Content-type 设置为 x-www-url-formencoded。它应该是 x-www-form-urlencoded。