Ajax 的 data 和 fetch API 的 body 有什么区别？

Question

来自 jQuery

的 ajax 函数

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

这是一个使用提取的请求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);

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

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

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

(我没有同时使用它们)

Answer 1

'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);

Answer 2

从the documentation可以看出...

When data is an object, jQuery generates the data string from the object's key/value pairs unless the processData option is set to false. For example, { a: "bc", d: "e,f" } is converted to the string "a=bc&d=e%2Cf". If the value is an array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below). For example, { a: [1,2] } becomes the string "a%5B%5D=1&a%5B%5D=2" with the default traditional: false setting.

fetch 不会那样做。但是另外，你说你通过将 Content-Type: application/json 作为 header 来发送 JSON，但你没有这样做（并且你的 jQuery 代码没有要么这样做，它会发送 URI-encoded 数据）。

你必须自己做。如果要发送 JSON，请使用 JSON.stringify:

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

如果要发送 URI-encoded 数据，请使用 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。

Also how come this fetch implementation is producing an error in my node terminal ? If I use a digit instead of 'Boston' for example the Unexpected token changes to '<' .
SyntaxError: Unexpected token o in JSON at position 1
   at JSON.parse (<anonymous>)

因为您的 object 被强制转换为字符串，并且它被强制转换为 "[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);

Ajax 的 data 和 fetch API 的 body 有什么区别？

What is the difference between data of Ajax and body of fetch API?

javascript

ajax

jquery

http-post

fetch