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。此外，選擇資料物件格式取決於伺服器的要求或我們想要傳送的資料型別。因此，在下一篇文章中，我們將學習跨源請求。

列印頁面
上一頁
下一頁
廣告