AJAX - 提交表單

AJAX 是最流行的 Web 技術，幾乎所有 Web 開發人員都使用它來建立動態 Web 應用程式。它使用 Web 瀏覽器的內建 XMLHttpRequest 物件在後臺非同步地向 Web 伺服器傳送和接收資料，而無需重新整理或影響網頁。我們還可以非常輕鬆地使用 AJAX 提交表單。

因此，要使用 AJAX 提交表單，我們需要遵循以下步驟：

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

var zhttp = new XMLHttpRequest();

步驟 2 - 建立一個變數（也稱為表單元素），其中包含表單中所有鍵值對，可以使用 document.querySelector() 方法。

const FormElement = document.querySelector("mForm")

如果您有多個表單，則可以使用它們的 ID 定義表單。

步驟 3 - 使用 FormData 建構函式建立 FormData 物件，並將上面建立的 FormElement 傳遞給它。這意味著 FormData 物件使用鍵值對進行初始化。

const myForm = new FormData(FormElement)

步驟 4 - 建立一個回撥函式，當伺服器響應請求時將執行此函式。此函式定義在 XHR 物件的 onreadystatechange 屬性中。

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

這裡的 responseText 屬性將返回伺服器的響應作為 JavaScript 字串，我們將在網頁中進一步使用它來顯示訊息。

document.getElementById("responseElement").innerHTML = this.responseText;

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

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

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

zhttp.send(myForm);

完整的示例如下：

示例

在上面的程式碼中，我們建立了一個簡單的 HTML 表單來收集使用者資料，然後使用 JavaScript 和 XMLHttpRequest 提交表單資料。

因此，當用戶點選“提交記錄”按鈕時，會呼叫 sendFormData() 函式。sendFormData() 函式首先建立一個新的 XHR 物件。然後建立一個表單元素，其中儲存來自 HTML 表單的所有鍵值對。然後它是一個新的 FormData 物件，並將表單元素傳遞到物件中。接下來，它設定一個回撥函式來處理來自伺服器的響應。當 readyState 屬性的值 = 4 且 Status 屬性的值 = 201 時，將觸發此函式。最後，它呼叫 open() 方法並使用 HTTP POST 方法初始化它以及伺服器的 URL，最後它呼叫 send() 方法將 FormData 請求傳送到伺服器。

因此，當伺服器返回響應時，回撥函式將顯示結果並在控制檯日誌中列印訊息。

<!DOCTYPE html>
<html>
<body>
<script>
   function sendFormData() {
      // Creating XMLHttpRequest object
      var zhttp = new XMLHttpRequest();
      const mFormEle = document.querySelector("#mForm")
      // Creating FormData object
      const myForm = new FormData(mFormEle);
      // 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(new FormData(mFormEle));
   }
</script>
<!--Creating simple form-->
<form id = "mForm">
   <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>
</form>
<div id="example"></div>
</body>
</html>

輸出

結論

這就是 AJAX 如何使用 XMLHttpRequest 提交表單。這是 AJAX 最常用的功能。在下一篇文章中，我們將瞭解 AJAX 如何將檔案上傳到伺服器。

列印頁面