Ajax 简明教程

Fetch API - Send Data Objects

在 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 格式。

Example

在以下程序中，我们创建了一个脚本，以 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>

Output

send data objects

FormData

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

Syntax

const newform = new FormData()

append() 方法用于在 FormData 对象中添加新的键值对。

Syntax

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

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

Example

在以下程序中，我们创建一个脚本来发送 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>

Output

send data objects2

Plain Text

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

以下是纯文本对象：

const newData = "My car is running very fast"

纯文本使用以下头部：

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

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

Example

在以下程序中，我们创建一个脚本，以纯文本发送数据。为此，我们创建一个数据对象，并在纯文本中为其分配字符串值。现在，我们使用 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>

Output

send data objects2

URL-encoded Data

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

Syntax

const newData = new URLSearchParams()

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

Syntax

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

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

URL 编码的数据使用以下头部：

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

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

Example

在以下程序中，我们创建一个脚本，以纯 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>

Output

send data objects3

Conclusion

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