Fetch API - 发送POST请求

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

发送POST请求

Fetch API也支持POST请求。POST请求是一个HTTP请求，用于将数据或表单发送到给定的资源或Web服务器。在Fetch API中，我们可以通过指定附加参数（如method、body、headers等）来使用POST请求。

语法

fetch(URL, {
   method: "POST",
   body: {//JSON Data},
   headers:{"content-type": "application/json; charset=UTF-8"}
})
.then(info =>{
   // Code
})
.catch(error =>{
   // 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>
   // Retrieving data from the URL using POST request
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request
      method: "POST",
   
      // Adding body which we want to send
      body: JSON.stringify({
      id: 32,
      title: "Hello! How are you?",
      }),
      // Adding headers
      headers:{"Content-type": "application/json; charset=UTF-8"}
   })
   // Converting received information into JSON
   .then(response => response.json())
   .then(myData => {
      // Display the retrieve Data
      console.log("Data Sent Successfully");
   
      // Display output
      document.getElementById("manager").innerHTML = myData;
   });
</script>
<h2>Display Data</h2>
<div>
   <!-- Displaying retrevie data-->
   <table id = "manager"></table>
</div>
</body>
</html>

输出

结论

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

打印页面