使用 fetch 发送非字符串化对象

Question

我第一次使用fetch-api 并且在将非字符串化的JSON 对象传递给服务器时遇到了麻烦。 基本上我想实现与此相同的行为：

$.post(url, {"test": "test"}, function(response) {
   console.log(response);
});

fetch 方法正在与对我来说无法访问的 Web API 进行通信，并且需要一个普通的 JSON 对象。

通常我只会使用FormData 将数据传递给服务器，但是JSON 将被转换为字符串[Object object]：

fetch(url, {
   method: 'POST',
   body: {"test": "test"}
})
   .then(data => data.json())
   .then(json => console.log(json))
   .catch(e => console.error(e));

使用$_POST（这是API 正在使用的）时，正文请求似乎为空，但使用file_get_contents('php://input) 时给出了正确的值。

虽然这与为请求提供的错误 header 有关。所以我尝试添加标题 Ajax 帖子使用：content-type:multipart/form-data;。但是，这也没有任何价值。

我想知道这是否明确有意不使用普通的 JSON 对象作为数据提供，或者我只是遗漏了什么？

---

这确实有效，但不允许，因为它是 JSON 对象的字符串化版本：

var formData = new FormData();
formData.append('data', JSON.stringify(data));

fetch(url, {
   method: 'POST',
   body: formData
})
   .then(data => data.json())
   .then(json => console.log(json))
   .catch(e => console.error(e));

Answer 1

首先，我需要发布到 $_POST 使用的 POST 协议。为此，我将application/x-www-form-urlencoded 的标头（这是$_POST 使用的协议，如docs 中所述）添加到获取发布请求：

fetch(url, {
   headers: new Headers({'Content-Type': 'application/x-www-form-urlencoded'}), // Default header which $_POST listens to
   ...

现在$.post 实际发送数据的方式是创建给定对象的序列化字符串（例如：a%5Bone%5D=1）。要将对象转换为序列化字符串，可以使用$.param：

fetch(url, {
            headers: new Headers({'Content-Type': 'application/x-www-form-urlencoded'}), // Default header which $_POST listens to
            method: 'POST',
            body: $.param(data)
        })

这将使您能够从 $_POST 检索数据，就像使用简单的 $.post 一样。

Answer 2

假设您的数据位于变量var data = { a: "some data", b: 123 } 中。如果您希望 PHP 中的代码以这种方式访问​​这些字段：

$_POST["a"] == "some data";
$_POST["b"] == 123;

那你需要这样发送formData格式的数据：

var fdata = new FormData();
fdata.append('a', 'some data');
fdata.append('b', '123');

现在您可以发送该数据，PHP 将可以访问分隔字段 a 和 b，但请注意 b 将是一个字符串，而不是一个数字。

如果你想发送一个数组怎么办。假设{ c: ['hello', 'world', '!'] }？您必须遵循 PHP 名称约定并多次添加相同的名称：

var fdata = new FormData();
fdata.append('c[]', 'hello');
fdata.append('c[]', 'world');
fdata.append('c[]', '!');

设置好表单数据实例后，即可作为请求体使用。