为什么 php POST 数组在一个实例中对我来说是空的，而在另一个实例中填充了数组，两者都使用 XHR POST？

Question

我正在尝试编写代码来检查用户名是否已被使用，并且我编写了一些测试代码来填充我的 php $_POST 数组。但是，我对正在开发的 'production' 代码稍微修改了测试代码，我的 $_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() 方法。我意识到我已经将我的第一组代码从我直接感兴趣的输入上的 'blur' 事件切换到我的第二组代码，其中我的主要事件是单击 'checkAvailability' 按钮，但是我看不出哪里会使我的 $_POST 数组不接受发送的值。在这两种情况下，我都可以看到请求中哪里有 username=nameEntryFromInputTextBox。请大家看看指教

Answer 1

不确定 xhr.send 是否以 JSON 格式发送，但无论如何，请尝试使用以下方式捕获 post：

$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

Answer 2

我有一个错字，在我的代码中没有工作我将内容类型设置为 x-www-url-formencoded。它应该是 x-www-form-url编码的。

为什么 php POST 数组在一个实例中对我来说是空的，而在另一个实例中填充了数组，两者都使用 XHR POST？

Why is php POST array empty for me in one instance and populated in another, both using XHR POST?

html

javascript

php

xmlhttprequest

http-post