使用 fetch 发送 non-stringified objects

Question

我是第一次使用 fetch-api，在将 non-stringified JSON object 传递给服务器时遇到问题。基本上我想实现与此相同的行为：

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

获取方法正在与网络 API 通信，这对我来说 无法访问 并且 需要一个普通的 JSON object.

通常我只会使用 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));

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

我认为这与向请求提供的错误 header 有关。所以我尝试添加 header Ajax post uses: content-type:multipart/form-data;。然而，这也没有得到任何价值。

我想知道这是否是明确故意不使用纯 JSON object 作为数据提供，或者我只是遗漏了什么？

这确实有效，但不允许，因为它是 JSON object:

的字符串化版本

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

假设您的数据在变量 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[]', '!');

设置表单数据实例后，您可以将其用作请求的主体。

Answer 2

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

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

现在 $.post 实际发送数据的方式是创建给定 object 的序列化字符串（例如：a%5Bone%5D=1）。要将 object 转换为序列化字符串，您可以使用 $.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 检索数据

使用 fetch 发送 non-stringified objects

Send non-stringified objects with fetch

ecmascript-6

es6-promise

form-data

fetch-api