Javascript Ajax的数据和FetchAPI的主体有什么区别？

jQuery中的ajax函数

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    console.log( "Data Saved: " + msg );
  });

这是一个使用fetchapi的请求

const data = { name: "John", data: "Boston" };
const options = {
    method: 'POST',
    headers: {
              'Content-Type': 'application/json',
             },
    body: data,
};

const response = await fetch('/api ',options);
const responseData = await response.json();
console.log(responseData);

而且，为什么这个fetch实现在我的节点终端中产生错误？
例如，如果我使用数字而不是“Boston”，则意外的标记将更改为“Boston” 您声明您正在发送JSON

数据

是一个对象，而不是JSON

当它被强制转换为字符串时（因为它不是

fetch

识别的数据类型，所以它会自动转换为字符串），它会变成

“[object object]”

，仍然不是JSON。（

[

启动一个数组，然后

o

是一个错误）

---

如果要发送JSON，您需要自己将对象转换为JSON。使用

JSON.stringify

---

还要注意，虽然服务器端代码似乎能够处理JSON输入，但jQuery发送的是

application/x-www-form-urlencoded

数据，而不是JSON

因此，要与之匹配，您需要：

var searchParams = new URLSearchParams();
searchParams.append("name", "John");  
searchParams.append("location", "Boston");

const options = {
    method: 'POST',
    headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
             },
    body: searchParams.toString(),
};

const response = await fetch('/api ',options);
const responseData = await response.json();
console.log(responseData);

从中我们可以看出

当数据是一个对象时，jQuery从对象的键/值对生成数据字符串，除非

processData

选项设置为false。例如，

{a：“bc”，d：“e，f”}

被转换为字符串

“a=bc&d=e%2Cf”

。如果值是一个数组，jQuery将基于传统设置（如下所述）的值使用相同的键序列化多个值。例如，

{a:[1,2]}

成为字符串

“a%5B%5D=1和a%5B%5D=2”

，默认设置为

传统：false

设置

fetch

不会这样做。但另外，您说过您通过将

Content-Type:application/JSON

作为头来发送JSON，但您没有这样做（您的jQuery代码也没有这样做，它发送URI编码的数据）

您必须自己发送。如果您想发送JSON，请使用

JSON.stringify

：

const options = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
};

如果要发送URI编码的数据，请使用

URLSearchParams

：

const data = new URLSearchParams([ // Note this is an array of
    ["name", "John"],              // [name, value] arrays
    ["data", "Boston"],
]);
const options = {
    method: 'POST',
    body: data,
};

如果要发送标准表单编码，请使用

FormData

（与上述内容完全相同，但使用

FormData

而不是

URLSearchParams

）

另外，这个获取实现为什么会在我的节点终端中产生错误？

---

例如，如果我使用数字而不是“Boston”，那么意外的标记将更改为“至少有很强的相关性：fetch拒绝其对网络错误的承诺是什么意思？我对使用web API和http之类的东西非常陌生。也非常感谢您提供的这一旁注（我应该更多地阅读文档）@JohnSmith-如果

fetch

甚至无法与URL定义的另一端通话（无法连接，或对请求没有响应，或返回网络级错误，如SSL协商失败等），则这是一个网络错误。但如果它成功与另一端通话，另一端通过HTTP（如5xx）发回错误[server failure]，一个404，诸如此类），

fetch

通过一个

Response

对象来实现其承诺，该对象的

ok

属性为

false

，并且在其

status

属性中包含相关的HTTP状态代码。

var searchParams = new URLSearchParams();
searchParams.append("name", "John");  
searchParams.append("location", "Boston");

const options = {
    method: 'POST',
    headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
             },
    body: searchParams.toString(),
};

const response = await fetch('/api ',options);
const responseData = await response.json();
console.log(responseData);

const options = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
};

const data = new URLSearchParams([ // Note this is an array of
    ["name", "John"],              // [name, value] arrays
    ["data", "Boston"],
]);
const options = {
    method: 'POST',
    body: data,
};

SyntaxError: Unexpected token o in JSON at position 1
   at JSON.parse (<anonymous>)

const response = await fetch('/api ',options);
if (!response.ok) {
    throw new Error("HTTP error " + response.status);
}
const responseData = await response.json();
console.log(responseData);