Fetch API - 发送 POST 请求_AJAX 菜鸟教程

就像 XMLHttpRequest 一样，Fetch API 也提供了一个 JavaScript 接口，用于异步管理进出 Web 服务器的请求和响应。它提供了一个 fetch（）方法来异步获取资源或将请求发送到服务器，而无需重新加载网页。在 fetch（）方法的帮助下，我们可以执行各种请求，如 POST、GET、PUT 和 DELETE。因此，在本文中，我们将学习如何在 Fetch API 的帮助下发送 POST 请求。

发送 POST 请求

Fetch API 还支持 POST 请求。POST 请求是一个 HTTP 请求，用于将数据或表单发送到给定资源或 Web 服务器。在 Fetch API 中，我们可以通过指定其他参数（如方法、正文标头等）来使用 POST 请求。

语法

fetch(URL, {
   method: "POST",
   body: {//JSON Data},
   headers:{"content-type": "application/json; charset=UTF-8"}
})
.then(info =>{
   // 代码
})
.catch(error =>{
   // 捕获错误
});

此处 fetch（）函数包含以下参数 -

URL − 它表示我们想要获取的资源。
method − 它是一个可选参数。它用于表示请求，如 GET、POST、DELETE 和 PUT。
body − 它也是一个可选参数。当您想向请求添加正文时，可以使用此参数。
header − 它也是一个可选参数。它用于指定标头。

例

在下面的程序中，我们将向给定的 URL 发送一个 JSON 文档。为此，我们定义了一个 fetch（）函数以及一个 URL、一个 POST 请求、一个正文（即 JSON 文档）和一个标头。因此，当 fetch（）函数执行时，它会将给定的正文发送到指定的 URL，并使用 response.json（）函数将响应数据转换为 JSON 格式。之后，我们将显示响应。

<!DOCTYPE html>
<html>
<body>
<script>
   // 使用POST请求从URL检索数据
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // 添加POST请求
      method: "POST",
   
      // 添加我们要发送的正文
      body: JSON.stringify({
      id: 32,
      title: "Hello! How are you?",
      }),
      // 添加标题
      headers:{"Content-type": "application/json; charset=UTF-8"}
   })
   // 将接收到的信息转换为JSON
   .then(response => response.json())
   .then(myData => {
      // 显示检索数据
      console.log("数据发送成功");
   
      // 显示输出
      document.getElementById("manager").innerHTML = myData;
   });
</script>
<h2>显示数据</h2>
<div>
   <!-- 显示重试数据 -->
   <table id = "manager"></table>
</div>
</body>
</html>

输出

发送帖子

结论

这就是我们使用 Fetch API 发送 POST 请求的方法。使用此请求，我们可以轻松地将数据发送到指定的 URL 或服务器。此外，使用 fetch（）函数，您可以根据您的要求修改您的请求。现在，在下一篇文章中，我们将学习如何发送 PUT 请求。

<< Fetch API - 发送 GET 请求 Fetch API - 发送 PUT 请求 >>