Ajax 的数据和 fetch API 的主体有什么区别？

如何解决Ajax 的数据和 fetch API 的主体有什么区别？

来自 jQuery 的 ajax 函数

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

这是一个使用 fetch API 的请求

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”，则 Unexpected 标记会更改为 '

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

这两者之间有什么需要注意的吗？
ajax的数据和fetch的正文？

（我不会同时使用它们）

解决方法

'Content-Type': 'application/json',

您声明您正在发送 JSON。

const data = { name: "John",data: "Boston" };

body: data,

data 是一个对象，而不是 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);

,

从the documentation我们可以看到...

当数据是一个对象时，除非 processData 选项设置为 false，否则 jQuery 从对象的键/值对生成数据字符串。例如，{ a: "bc",d: "e,f" } 被转换为字符串 "a=bc&d=e%2Cf"。如果值是一个数组，jQuery 会根据传统设置的值（如下所述）使用相同的键序列化多个值。例如，{ a: [1,2] } 变为字符串 "a%5B%5D=1&a%5B%5D=2"，具有默认的 traditional: 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。

此外，这个 fetch 实现是如何在我的节点终端中产生错误的？ 例如，如果我使用数字而不是 'Boston'，则 Unexpected 标记会更改为 '

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

因为您的对象被强制转换为字符串，并且它被强制转换为 "[object Object]"，这在 o 中是无效的 JSON。

---

旁注：您的 fetch 代码正在成为 API 中的猎物：fetch 仅拒绝对 网络 错误的承诺，而不是 HTTP 错误。您不能假设 fetch 的已履行承诺意味着您的请求已成功，您必须检查：

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