Fetch API - 发送数据对象

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

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

JSON

JSON 被称为 JavaScript 对象表示法。它是网络浏览器和服务器之间交换数据最常用的数据格式。 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() 函数向服务器发送请求。在此获取函数中，我们包含请求方法"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中，我们可以以键值对的形式存储数据，其中键代表表单的字段，值代表该字段的值。它可以处理二进制数据、文件和其他表单类型。要创建新的表单对象，我们需要使用 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() 函数向服务器发送请求。在此获取函数中，我们包含请求方法"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中，我们还可以以简单的纯文本形式发送数据。如果我们想发送原始文本或非标准数据格式，那么我们使用纯文本发送数据。要发送纯文本，我们只需在请求正文中以字符串形式添加文本即可。

以下是纯文本对象 −

const newData = "My car is running very fast"

以下标头用于纯文本 −

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

它向服务器表明接收到的数据是纯文本的。

示例

在下面的程序中，我们创建一个脚本来以纯文本形式发送数据。为此，我们创建一个数据对象并以简单文本形式为其分配一个字符串值。现在我们使用 fetch() 函数向服务器发送请求。在此获取函数中，我们包含请求方法"POST"，将标头设置为"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() 函数向服务器发送请求。在此获取函数中，我们包含请求方法"POST"，将标头设置为"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。此外，数据对象格式的选择取决于服务器的要求或我们想要发送的数据类型。所以现在在下一篇文章中，我们将学习跨域请求。

AJAX 教程

Fetch API 基础知识

Stream API 基础知识

Fetch API - 发送数据对象

JSON

示例

输出

表单数据

语法

语法

示例

输出

纯文本

示例

输出

URL 编码数据

语法

语法

示例

输出

结论

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！