AJAX - FormData 物件

在 AJAX 中，FormData 物件允許您建立一組鍵值對，這些鍵值對錶示表單欄位及其值，可以使用 XMLHttpRequest 傳送。它主要用於傳送表單資料，但也可以獨立使用來發送資料。FormData 物件傳輸的資料格式與表單提交方法傳送的資料格式相同。

要建立一個新的 FormData 物件，AJAX 提供了 FormData() 建構函式。

語法

const objectName = new FormData()
Or 
const objectName = new FormData(form)
Or
const objectName = new FormData(form, mSubmit)

其中 FormData() 可以帶或不帶引數使用。FormData() 建構函式使用的可選引數為：

form − 它表示一個 HTML <form> 元素。如果 FormData 物件具有此引數，則該物件將使用每個元素的 name 屬性作為鍵，並使用其提交的值作為值，填充表單的當前鍵值對。它還會對檔案的輸入內容進行編碼。

mSubmit − 它表示表單的提交按鈕。如果 mSubmit 具有 name 屬性或 <input type = "image>，則其內容將包含在 FormData 物件中。如果指定的 mSubmit 不是按鈕，則會丟擲 TypeError 異常。如果 mSubmit 不是給定表單的成員，則會丟擲 NotFoundError 異常。

方法

FormData 物件支援以下方法：

序號	方法名稱及描述
1	FormData.append() 此方法用於將新值追加到現有鍵中。或者如果鍵不存在，則可以新增新鍵。
2	FormData.delete() 此方法用於刪除鍵值對。
3	FormData.entries() 此方法返回一個迭代器，該迭代器遍歷鍵值對。
4	FormData.get() 此方法返回 FormData 物件中與給定鍵相關的第一個值。
5	FormData.getAll() 此方法用於返回 FormData 物件中與給定鍵相關的所有值的陣列。
6	FormData.has() 此方法檢查 FormData 物件是否包含指定的鍵。
7	FormData.keys() 此方法返回一個迭代器，該迭代器遍歷 FormData 物件中存在的鍵值對的所有鍵。
8	FormData.set() 此方法為 FormData 物件中存在的鍵設定新值。或者如果不存在，則可以新增新的鍵/值。
9	FormData.values() 此方法返回一個迭代器，該迭代器遍歷 FormData 物件中存在的所有值。

建立 FormData 物件

要建立和使用 FormData 物件而不使用 HTML 表單，請按照以下步驟操作：

步驟 1 − 使用 XMLHttpRequest() 建構函式建立一個 XMLHttpRequest 物件。

var zhttp = new XMLHttpRequest();

步驟 2 − 使用 FormData 建構函式建立一個 FormData 物件。

const myForm = new FormData()

步驟 3 − 使用 append() 方法新增鍵值對。

myForm.append("KeyName", "keyValue")

步驟 4 − 建立一個回撥函式來處理響應。

zhttp.onreadystatechange = function() {
   // Body
}

步驟 5 − 現在我們使用 open() 函式。在 open() 函式中，我們傳遞一個 POST 請求以及我們要釋出表單資料的伺服器 URL。

zhttp.open("POST", url, async)

步驟 6 − 所以最後我們使用 send() 函式將請求以及 FormData 物件一起傳送到伺服器。

zhttp.send(myForm);

現在讓我們透過示例來討論一下：

示例 1

<!DOCTYPE html>
<html>
<body>
<script>
   function dataDoc() {
      // Creating XMLHttpRequest object
      var zhttp = new XMLHttpRequest();
   
      // Creating FormData object
      const myForm = new FormData();
   
      // Assigning the form data object with key/value pair
      myForm.append("title", "AJAX Tutorial")
      myForm.append("UserId", "232")
      myForm.append("Body", "It is for web development")
      myForm.append("Age", "33")
   
      // Creating call back function to handle the response
      zhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 201) {
            document.getElementById("example").innerHTML = this.responseText;
            console.log("Form Data Posted Successfully")
         }
      };
      // Specify the method as POST, URL, and set async to true
      zhttp.open("POST", "https://jsonplaceholder.typicode.com/todos", true);
   
      // Sending the request to the server
      zhttp.send(myForm);
   }
</script>
<h2>Sending Form Data</h2>
<button type="button" onclick="dataDoc()">Submit</button>
<div id="example"></div>
</body>
</html>

輸出

因此，當用戶單擊“提交”按鈕時，將呼叫 dataDoc() 函式。然後 dataDoc() 函式首先建立一個新的 XHR 物件和一個新的 FormData 物件。然後使用 append() 方法在 FormData 物件中新增新的鍵值對。接下來，它設定一個回撥函式，該函式處理來自伺服器的響應。當 readyState 屬性的值 = 4 且 Status 屬性的值 = 201 時，將觸發此函式。最後，它呼叫 open() 方法並使用伺服器的 URL 初始化 HTTP POST 方法，最後它呼叫 send() 方法將 FormData 請求傳送到伺服器。

因此，當來自伺服器的響應到達時，回撥函式顯示結果並在控制檯日誌中列印“表單資料已成功釋出”訊息。

示例 2

<!DOCTYPE html>
<html>
<body>
<script>
   function sendFormData() {
      // Creating XMLHttpRequest object
      var zhttp = new XMLHttpRequest();
   
      // Creating FormData object
      const myForm = new FormData();
   
      // Assigning the form data with key/value pair
      myForm.append("title", document.querySelector('#Utitle').value)
      myForm.append("UserId", document.querySelector('#UId').value)
      myForm.append("Body", document.querySelector('#Ubody').value)
      myForm.append("Age", document.querySelector('#Uage').value)
   
      // Creating call back function to handle the response
      zhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 201) {
            document.getElementById("example").innerHTML = this.responseText;
            console.log("Form Data Posted Successfully")
         }
      };
      // Post/Add form data on the server
      zhttp.open("POST", "https://jsonplaceholder.typicode.com/todos", true);
   
      // Sending the request to the server
      zhttp.send(myForm);
   }
</script>
   <!--Creating simple form-->
   <h2>Enter the requested Data</h2>
   <label for="Utitle">Title</label>
   <input id="Utitle" type="text" name="title"><br>
   
   <label for="UId">UserId</label>
   <input id="UId" type="number" name="UserID"><br>
   
   <label for="Ubody">Body</label>
   <input id="Ubody" type="text" name="body"><br>
   
   <label for="Uage">Age</label>
   <input id="Uage" type="number" name="age"><br>
   
   <button type="button" onclick="sendFormData()">Submit Record</button>
   <div id="example"></div>
</body>
</html>

輸出

在下面的圖片中，在輸入詳細資訊後，當我們單擊提交按鈕時，資料將傳送到伺服器，伺服器返回 id 並顯示控制檯中的訊息。

在上面的程式碼中，我們收集使用者資料並使用 JavaScript 和 XMLHttpRequest 提交資料。

因此，當用戶單擊“提交記錄”按鈕時，將呼叫 sendFormData() 函式。sendFormData() 函式首先建立一個新的 XHR 物件和一個新的 FormData 物件。它使用 append() 方法追加表單資料，這些資料是使用者輸入的鍵及其值。接下來，它設定一個回撥函式，該函式處理來自伺服器的響應。當 readyState 屬性的值 = 4 且 Status 屬性的值 = 201 時，將觸發此函式。最後，它呼叫 open() 方法並使用伺服器的 URL 初始化 HTTP POST 方法，最後它呼叫 send() 方法將 FormData 請求傳送到伺服器。

來自伺服器的響應，回撥函式顯示結果並在控制檯日誌中列印訊息。

結論

因此，這就是我們如何使用 FormData 物件的方法。它也是一個重要的物件，用於儲存各種型別的資料，例如檔案、純文字、JSON 文件等。現在在下一篇文章中，我們將學習如何使用 XMLHttpRequest 傳送 POST 請求。

列印頁面