POST 适用于 JQuery 但不适用于 XMLHttpRequest

Question

所以我试图从 Javascript POST 到我的服务器（php），并试图不使用 JQuery。

此代码有效并将必要的数据发布到数据库

var msg = {};
msg['name'] = 'joe';
msg['message'] = 'why no work';

$.post(phpURL, msg, function(data) {});

但是这个没有

var xhr = new XMLHttpRequest();
xhr.open("POST", phpURL, true);
xhr.send(msg);

我什至查看了我的 php 日志，查看了标题和 JQuery 与我可以看到的 XHR 的唯一区别是内容类型 Z099FB995346F31C749F6E40DB0F395 "application/x-www-form-urlencoded; charset=UTF-8" charapplication还有这个 header "x-requested-with" "XMLHttpRequest" 。

所以我尝试了以下标题的所有组合。

var xhr = new XMLHttpRequest();
xhr.open("POST", phpURL, true);
//xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
//xhr.setRequestHeader('x-requested-with', 'XMLHttpRequest');
xhr.send(msg);

没有效果。

值得一提的是，如果我尝试在任何地方添加JSON.stringify(msg) ，它在 JQuery 或 XHR 中都不起作用。 但我想先让这个工作，并解释这个奇怪的差异。

我倾向于相信这是一个 Javascript 问题，因为 JQuery 帖子有效，此外，服务器的 GET 请求和我试图发布到的同一张表确实有效。

Answer 1

不要将 JavaScript 对象与 JSON 混淆。

如果您将 object 传递给 jQuery 的data参数，那么它将将其编码为application/x-www-form-urlencoded数据（不是 JSON。）。

如果您将application/x-www-form-urlencoded数据发布到 PHP 那么它将解析它并用它填充$_POST超全局。

如果您将 object 传递给XMLHttpRequest object 的send()方法，那么它不会为您编码。 它将隐式调用.toString()并发送任何有用的信息。

为了达到与 jQuery 相同的效果，您需要自己对数据进行编码。 不要忘记还设置Content-Type标头！

const encoded = new URLSearchParams(Object.entries(msg)).toString();
const xhr = new XMLHttpRequest();
xhr.open("POST", phpURL, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(encoded);

---

如果您想发送 JSON ，那么您还必须对其进行编码，但这只需使用JSON.stringify()即可完成，尽管您还需要设置 Content-Type Z099FB995346F31C749F6E40DB0ZF35 application/json时间（EE40DB0ZF39）。

const encoded = JSON.stringify(msg);
const xhr = new XMLHttpRequest();
xhr.open("POST", phpURL, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(encoded);

但是，PHP不会自动解析 JSON因此$_POST将保持为空，因此您需要手动解析它。

<?php 
    $json = file_get_contents('php://input');
    $msg = json_decode($json);

Answer 2

jQuery 在发送 AJAX 请求时做了很多工作。 它以 application/x-www-form-urlencoded 格式转换实时 object 并修复标题，并根据 arguments 执行其他任务。

当您发送原生 XMLHttpRequest 时，您必须自己处理所有这些。 在您说的评论中，您实际上想发送 JSON。 JSON 不是 PHP 可以识别的标准表单内容类型，因此您必须以 application/json 格式发送它。 像这样：

var msg = {
    name: 'joe',
    message: 'why no work'
  },
  xhr = new XMLHttpRequest();

xhr.open('POST', phpURL, true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
// Add response handling here, if needed
xhr.send(JSON.stringify(msg));

但是，application/json 的内容类型在 PHP 中不被视为表单数据， $_POST _POST 将为空。 您可以从接收到的原始数据中读取数据，原始数据保存在特定文件中。 像这样：

$data = file_get_contents('php://input');
// Results a string: '{"name":"joe","message":"why no work"}'

现在您可以使用json_decode($data)将 JSON 转换为关联数组。