Fetch API - 发送数据对象

上一页
下一页

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

Fetch API 支持多种数据格式；您可以根据设置的内容类型头或服务器的要求进行选择。一些常用的数据格式包括：

JSON

JSON 被称为 JavaScript 对象表示法。它是 Web 浏览器和服务器之间交换数据的最常用数据格式。在 JSON 格式中，数据以键值对的形式存储，并完全支持嵌套对象或数组。要以 JSON 格式发送数据，我们需要借助“JSON.stringify()”函数将 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>

输出

Send Data Object

FormData

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() 函数向服务器发送请求。在这个 fetch 函数中，我们包含请求方法“POST”，并将 FormData 对象包含在 body 参数中。在向服务器发送请求后，我们现在使用 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>

输出

Send Data Object

纯文本

在 Fetch API 中，我们还可以以简单的纯文本格式发送数据。如果要发送原始文本或非标准数据格式，则使用纯文本发送数据。要发送纯文本，我们需要简单地将文本以字符串的形式添加到请求体中。

以下是纯文本对象：

const newData = "My car is running very fast"

以下头信息用于纯文本：

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

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

示例

在下面的程序中，我们创建了一个脚本以纯文本格式发送数据。为此，我们创建了一个数据对象，并为其分配了一个简单的文本字符串值。现在，我们使用 fetch() 函数向服务器发送请求。在这个 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>

输出

Send Data Object

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”，将头信息设置为“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>

输出

Send Data Object

结论

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

打印页面
上一页
下一页
广告