jQuery AJAX POST 到 PHP 有效，XMLHttpRequest 无效

Question

我目前正在重构我以前的一些代码，以从 jQuery 的 AJAX 函数转向 vanilla JS 中的 XMLHttpRequest。据我了解，以下代码块应该是相同的。然而，虽然 jQuery 版本可以工作，但 XMLHttpRequest 不能。如果成功，您应该会在开发工具的网络选项卡中看到 PHP 返回的数组。

jQuery

$("#submit").click(() => {
  $.ajax({
    type: "POST",
    url: "http://arig.asuscomm.com/mn/PHP/submitNames.php",
    data: {
      first: "Hi!"
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="submit">
Submit
</button>

原版 JS

function send() {
  var data = {
    "first": "Hi!"
  };
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "http://arig.asuscomm.com/mn/PHP/submitNames.php", true);
  xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
  xhr.send(JSON.stringify(data))
}

<button id="submit" onclick="send()">
Submit
</button>

请注意，我的服务器正在本地运行，但我会尽量保持运行，直到我的问题得到解答。而且，由于我的服务器还没有 HTTPS，您可能需要从 HTTP 源发送请求。谢谢！！！

编辑：我正在使用找到的代码here。

Answer 1

问题出在您的服务器而不是数据本身，因为我收到了响应（它只是一个空数组） 您可以使用与 ajax 相同的方法来发送数据，也可以使用我得到与 Ajax 相同的响应的表单数据

function send() {
  var formData = new FormData();
  formData.append("first", "Hi!");
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "http://arig.asuscomm.com/mn/PHP/submitNames.php", true);
  xhr.send(formData)
}

或者你需要在你的服务器上处理 json 输入

Answer 2

jQuery 使用 application/x-www-form-urlencoded data format 编码数据，而不是 JSON。

您可以使用URLSearchParams object 对该格式的数据进行编码。

const data = {
  "first": "Hi!"
};

const params = new URLSearchParams();
Object.entries(data).forEach(
  ([key, value]) => params.append(key, value)
);
const encoded_data = params.toString();

console.log(encoded_data);