Ajax 简明教程
Fetch API - Body Data
Fetch API 是现代技术,可异步发送或接收数据,而无需刷新网页。它提供了一个在 Web 浏览器中创建 HTTP 请求的接口。它几乎被所有现代 Web 浏览器所支持。我们还可以说,通过使用 Fetch API,我们可以从 Web 服务器获取诸如 JSON 数据、HTML 页面等资源,并可以使用不同的 HTTP 请求(如 PUT、POST 等)将数据发送到服务器。因此,在本文中,我们将了解什么是正文数据以及我们如何使用正文数据。
Body Data
在 Fetch API 中,请求和响应都包含正文数据。请求中的正文数据是一个实例,其中包含我们要发送到服务器的数据,而响应中的正文数据是一个实例,其中包含用户请求的数据。它通常由 PUT 或 POST 请求用于向服务器发送数据。它可以是 ArrayBuffer、TypedArray、DataView、Blob、文件、字符串、URLSearchParams 或 FormData 的实例。在发送正文数据时,还需要在请求中设置一个标头,以便服务器知道数据的类型是什么。
Request 和 Response 接口提供了各种方法来提取正文,它们是 −
-
Request. arrayBuffer() − 此方法用于解决 ArrayBuffer 表示请求正文的承诺。
-
Request.blob() − 此方法用于解决 blob 表示请求正文的承诺。
-
Request.formData() − 此方法用于解决 formData 表示请求正文的承诺。
-
Request.json() − 此方法用于解析请求正文为 JSON 并解决解析结果的承诺。
-
Request.text() − 此方法用于解决具有请求正文的文本表示的承诺。
-
Response.arrayBuffer() − 此方法用于返回一个 promise,它将解决一个 ArrayBuffer 表示的响应正文。
-
Response.blob() − 此方法用于返回一个 promise,它将解决一个 Blob 表示的响应正文。
-
Response.formData() - 此方法用于返回一个 promise ,该 promise 可用作响应正文的 FormData 表示形式解析出来。
-
Response.json() - 此方法用于将响应正文解析为 JSON,并返回一个 promise 以根据解析结果解析出来。
-
Response.text() - 此方法用于返回一个 promise ,该 promise 可用作响应正文的文本表示形式解析出来。
所有这些方法均返回一个 promise ,该 promise 可用作实际正文内容解析出来。
正文数据通常与 fetch() 函数一起使用。在本文档中,您不必非用正文参数不可,只有在要向服务器发送数据时才可以使用该参数。
Syntax
fetch(resourceURL,{
Method: 'POST',
body:{
Name: "Monika",
Age: 34,
City: "Pune"
},
headers: {'content-Type':'application/json'}
})
fetch() 函数的参数 -
-
resourceURL - 它表示我们希望获取的资源。它可以是字符串、请求对象或资源的 URL。
-
method - 它表示请求方法,例如 GET、POST、PUT 和 DELETE。
-
headers - 它用于向您的请求添加 header。
-
body - 它用于向您的请求添加数据。GET 或 HEAD 方法不使用它。
在以下程序中,我们使用 POST 方法发送正文数据。因此,我们创建了一个 HTML 代码,在该代码中,我们使用 JavaScript 脚本向服务器发送数据。在脚本中,我们定义了一个 fetch() 函数,该函数使用 POST 请求方法将正文参数中存在的数据发送到指定的 URL。此处将标头设置为 “application/json”,表示我们正在发送数据。在向服务器发送请求之前,我们会借助 JSON.stringify() 函数将数据转换成 JSON 字符串。在收到服务器的响应后,我们检查响应是否正常。如果是,则我们使用 response.json() 函数将响应正文解析成 JSON,然后在输出屏幕上显示结果。如果遇到任何错误,则 catch() 块会处理该错误。
Example
<!DOCTYPE html>
<html>
<body>
<script>
// Retrieving data from the URL using the POST request
fetch("https://jsonplaceholder.typicode.com/todos", {
// Adding POST request
method: "POST",
// Adding body which we want to send
body: JSON.stringify({
id: 45,
title: "Tom like finger chips",
age: 34
}),
// Adding header
headers:{"Content-type": "application/json; charset=UTF-8"}
})
// Converting received information into JSON
.then(response =>{
if (response.ok){
return response.json()
}
})
.then(myData => {
// Display the retrieve Data
console.log("Data Sent Successfully");
// Display output
document.getElementById("sendData").innerHTML = JSON.stringify(myData);
}).catch(err=>{
console.log("Found error:", err)
});
</script>
<h2>Sent Data</h2>
<div>
<!-- Displaying retrevie data-->
<p id = "sendData"></p>
</div>
</body>
</html>