时间戳

首页 > 解决方案 > Ajax 的数据和 fetch API 的主体有什么区别？

javascript - 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的主体？ （我没有同时使用它们）

标签： javascriptjqueryajaxfetchhttp-post

解决方案

从文档中我们可以看到...

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

旁注：您的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);

推荐阅读