Ajax 简明教程
Fetch API - Send POST Requests
Fetch API 与 XMLHttpRequest 类似，它也提供了一个 JavaScript 接口，用于管理与 Web 服务器之间的异步请求和响应。它提供了 fetch() 方法，用于提取资源或向服务器发送异步请求，而无需重新加载网页。借助 fetch() 方法，我们可以执行各种请求，如 POST、GET、PUT 和 DELETE。因此，在本文中，我们将了解如何借助 Fetch API 发送 POST 请求。
Send POST Request
Fetch API 也支持 POST 请求。POST 请求是一种 HTTP 请求，用于将数据或窗体发送到给定的资源或 Web 服务器。在 Fetch API 中，我们可以使用 POST 请求，方法是指定其他参数，如方法、正文标头等。
Syntax
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 − 它也是一个可选参数。它用于指定标头。
Example
在以下程序中，我们将一个 JSON 文档发送到给定的 URL。为此，我们需要定义一个 fetch() 函数以及一个 URL，一个 POST 请求，一个正文（即 JSON 文档）和一个标头。因此，当 fetch() 函数执行时，它会将给定的正文发送到指定的 URL，并将响应数据转换成 JSON 格式，使用 response.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>