Fetch API - 发送数据对象

上一页
下一页

在 Fetch API 中，我们可以将数据对象从 Web 浏览器发送到 Web 服务器。数据对象是包含键值或属性值对中的数据的对象。或者我们可以说数据对象是我们在使用 Fetch API 创建 HTTP 请求时添加到请求正文中的数据。

Fetch API 支持各种数据格式;您可以根据设置的内容类型标题或服务器的要求来选择它们。一些常用的数据格式是 -

JSON 格式

JSON 称为 JavaScript 对象表示法。它是在 Web 浏览器和服务器之间交换数据的最常用数据格式。在 JSON 格式中，数据以键值对的形式存储，并为嵌套对象或数组提供全面支持。要以 JSON 格式发送数据，我们需要在 “JSON.stringfy（）” 函数的帮助下将 JavaScript 对象转换为 JSON 字符串。

以下是数据的 JSON 格式 -


const newData = {
	 	 empName: "Pooja",
	 	 empID: 2344,
	 	 departmentName: "HR"
};

其中 “empName”、“empID” 和 “department” 是键，“Pooja”、“2344” 和 “HR” 是它们的值。

以下标头用于 JSON 格式 -


headers:{"Content-type": "application/json; charset=UTF-8"}

它告诉服务器接收到的数据是 JSON 格式。

例

在下面的程序中，我们创建了一个脚本以 JSON 格式发送数据。为此，我们创建了一个具有键值对的数据对象。现在我们使用 fetch（） 函数向服务器发送请求。在这个 fetch 函数中，我们包含了 “POST” 的请求方法，将标头设置为 “application/json”，告诉服务器发送数据是 JSON 格式的，并通过使用 “JSON.stringify（）” 函数转换为 JSON 字符串，将数据对象包含在请求正文中。将请求发送到服务器后，我们现在使用 then（） 函数来处理响应。如果我们遇到错误，则该错误由 catch（） 函数处理。


<!DOCTYPE html>
<html>
<body>
<script>
	 	// Data object
	 	const newData = {
	 	 	 id: 45,
	 	 	 title: "Tom like finger chips",
	 	 	 age: 34
	 	};
	 	fetch("https://jsonplaceholder.typicode.com/todos", {
	 	 	 // Adding POST request to send data
	 	 	 method: "POST",
	 	
	 	 	 // Adding header
	 	 	 headers:{"Content-type": "application/json; charset=UTF-8"},
	 	
	 	 	 // Adding body which we want to send
	 	 	 // Here we convert data object into JSON string
	 	 	 body: JSON.stringify(newData)
	 	})
	 	// Converting received information into JSON
	 	.then(response =>{
	 	 	 if (response.ok){
	 	 	 	 	return response.json()
	 	 	 }
	 	})
	 	.then(myData => {
	 	 	 // Display result
	 	 	 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 data-->
	 	 	 <p id = "sendData"></p>
	 	</div>
</body>
</html>

输出

发送数据对象

表格数据

FormData 是一个内置的 JavaScript 对象。它用于以 HTML 表单格式发送数据。在 FormData 中，我们可以以键值对的形式存储数据，其中 key 表示表单的字段，value 表示该字段的值。它可以处理二进制数据、文件和其他表单类型。要创建一个新的表单对象，我们需要使用 FormData（） 构造函数和一个 new 关键字。

语法


 const newform = new FormData()

append（） 函数用于在 FormData 对象中添加新的键值对。

语法


 newform.append("name", "Mohina");

其中 “name” 是表单的键或字段，“Mohina” 是字段的值。在 Fetch API 中使用 FormData 对象时，我们不需要设置标头，因为 Fetch API 会自动为 FormData 对象设置标头。

例

在下面的程序中，我们创建了一个脚本来发送 FormData 中的数据。为此，我们使用 FormData（） 构造函数创建一个 FormData 对象，然后使用 append（） 函数在 FormData 对象中添加键值对。现在我们使用 fetch（） 函数向服务器发送请求。在这个 fetch 函数中，我们包含了 “POST” 的请求方法，并在 body 参数中包含了 FormData 对象。将请求发送到服务器后，我们现在使用 then（） 函数来处理响应。如果我们遇到错误，则该错误由 catch（） 函数处理。


<!DOCTYPE html>
<html>
<body>
<script>
	 	// FormData object
	 	const newform = new FormData();
	 	
	 	// Adding key-value pairs in FormData object
	 	newform.append("id", 4532);
	 	newform.append("title", "Today is raining");
	 	
	 	fetch("https://jsonplaceholder.typicode.com/todos", {
	 	 	 // Adding POST request to send data
	 	 	 method: "POST",
	 	
	 	 	 // Adding body which we want to send
	 	 	 // Here we add FormData object
	 	 	 body: newform
	 	})
	 	// Converting received information into JSON
	 	.then(response =>{
	 	 	 if (response.ok){
	 	 	 	 	return response.json()
	 	 	 }
	 	})
	 	.then(myData => {
	 	 	 // Display result
	 	 	 console.log("Data Sent Successfully");
	 	
	 	 	 // Display output in HTML page
	 	 	 document.getElementById("sendData").innerHTML = JSON.stringify(myData);
	 	}).catch(err=>{
	 	 	 console.log("Found error:", err)
	 	});
</script>
	 	<h2>Sent Data</h2>
	 	<div>
	 	 	 <!-- Displaying data-->
	 	 	 <p id = "sendData"></p>
	 	</div>
</body>
</html>

输出

发送数据对象

纯文本

在 Fetch API 中，我们还可以以简单的纯文本形式发送数据。如果我们想发送原始文本或非标准数据格式，那么我们使用 Plain text 发送数据。要发送纯文本，我们只需在请求正文中以字符串的形式添加文本即可。

以下是纯文本对象 -


 const newData = "My car is running very fast"

以下标头用于纯文本 -


 headers:{"Content-type": "text/plain"}

它向服务器指示接收到的数据是纯文本格式。

例

在下面的程序中，我们将创建一个脚本以纯文本形式发送数据。为此，我们创建一个数据对象，并以简单的文本为其分配一个字符串值。现在我们使用 fetch（） 函数向服务器发送请求。在这个 fetch 函数中，我们包含了 “POST” 的请求方法，将 header 设置为 “text/plain”，告诉服务器发送的数据是纯文本的，并在请求正文中包含数据对象。将请求发送到服务器后，我们现在使用 then（） 函数来处理响应。如果我们遇到错误，则该错误由 catch（） 函数处理。


<!DOCTYPE html>
<html>
<body>
<script>
	 	// FormData object
	 	const newform = new FormData();
	 	
	 	// Adding key-value pairs in FormData object
	 	newform.append("id", 4532);
	 	newform.append("title", "Today is raining");
	 	
	 	fetch("https://jsonplaceholder.typicode.com/todos", {
	 	 	 // Adding POST request to send data
	 	 	 method: "POST",
	 	
	 	 	 // Adding body which we want to send
	 	 	 // Here we add the FormData object
	 	 	 body: newform
	 	})
	 	// Converting received information into JSON
	 	.then(response =>{
	 	 	 if (response.ok){
	 	 	 	 	return response.json()
	 	 	 }
	 	})
	 	.then(myData => {
	 	 	 // Display result
	 	 	 console.log("Data Sent Successfully");
	 	
	 	 	 // Display output in HTML page
	 	 	 document.getElementById("sendData").innerHTML = JSON.stringify(myData);
	 	}).catch(err=>{
	 	 	 console.log("Found error:", err)
	 	});
</script>
	 	<h2>Sent Data</h2>
	 	<div>
	 	 	 <!-- Displaying data-->
	 	 	 <p id = "sendData"></p>
	 	</div>
</body>
</html>

输出

发送数据对象

URL 编码数据

URL 编码数据是在 URL 参数或 POST 请求正文中发送表单数据的最常用数据格式。它以键值对的形式表示数据，其中值在百分比编码的帮助下进行编码。我们可以在 URLSearchParams 类的帮助下创建 URL 编码的数据对象。

语法


const newData = new URLSearchParams()

append（） 函数用于在 URL 编码的数据对象中添加新的键值对。

语法


 newform.append("name", "Mohina");

其中 “name” 是表单的键或字段，“Mohina” 是字段的值。

以下标头用于 URL 编码的数据 -


 headers:{"Content-type": "text/plain"}

它向服务器指示接收到的数据是 URL 编码的数据。

例

在下面的程序中，我们创建一个脚本来以纯 URL 编码的形式发送数据。因此，为此，我们使用 URLSearchParams（） 创建一个数据对象，并使用 append（） 函数分配键值对。现在我们使用 fetch（） 函数向服务器发送请求。在这个 fetch 函数中，我们包含了 “POST” 的请求方法，将 header 设置为 “application/x-www-form-urlencoded”，它告诉服务器发送数据是 URL 编码的格式，并将数据对象包含在请求正文中。将请求发送到服务器后，我们现在使用 then（） 函数来处理响应。如果我们遇到错误，则该错误由 catch（） 函数处理。


<!DOCTYPE html>
<html>
<body>
<script>
	 	// FormData object
	 	const newform = new FormData();
	 	
	 	// Adding key-value pairs in FormData object
	 	newform.append("id", 4532);
	 	newform.append("title", "Today is raining");
	 	
	 	fetch("https://jsonplaceholder.typicode.com/todos", {
	 	 	 // Adding POST request to send data
	 	 	 method: "POST",
	 	
	 	 	 // Adding body which we want to send
	 	 	 // Here we add FormData object
	 	 	 body: newform
	 	})
	 	
	 	// Converting received information into JSON
	 	.then(response =>{
	 	 	 if (response.ok){
	 	 	 	 	return response.json()
	 	 	 }
	 	})
	 	.then(myData => {
	 	 	 // Display result
	 	 	 console.log("Data Sent Successfully");
	 	
	 	 	 // Display output in HTML page
	 	 	 document.getElementById("sendData").innerHTML = JSON.stringify(myData);
	 	}).catch(err=>{
	 	 	 console.log("Found error:", err)
	 	});
	 	</script>
<h2>Sent Data</h2>
<div>
	 	<!-- Displaying data-->
	 	<p id = "sendData"></p>
</div>
</body>
</html>

输出

发送数据对象

结论

这就是我们如何使用 Fetch API 发送不同类型的数据对象。在所有这些格式中，最常用的格式是 JSON 和 FormData。此外，选择数据对象格式的选择取决于服务器的要求或我们要发送的数据类型。所以现在在下一篇文章中，我们将学习跨域请求。

打印本页
上一页
下一页