Ajax 简明教程

AJAX - FormData Object

在 AJAX 中，FormData 对象允许您创建一组代表表单字段及其值（可以使用 XMLHttpRequest 发送）的键值对。它主要用于发送表单数据，但也可以独立发送数据。由 FormData 对象传输的数据与由表单的“提交”方法发送的数据具有相同格式。

要创建新的 FormData 对象，AJAX 提供 FormData() 构造函数。

Syntax

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。

Methods

FormData 对象支持以下方法：

Sr.No.	Method Name & Description
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 对象中存在的所有值中进行迭代。

Creating FormData Object

在没有 HTML 表单的情况下创建和使用 FormData 对象，请执行以下步骤：

Step 1 − 使用 XMLHttpRequest() 构造函数创建一个 XMLHttpRequest 对象；

var zhttp = new XMLHttpRequest();

Step 2 - 使用 FormData 构造函数创建 FormData 对象：

const myForm = new FormData()

Step 3 - 使用 append() 方法添加键值对：

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

Step 4 - 创建回调函数来处理响应：

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

Step 5 - 现在我们使用 open() 函数。在 open() 函数内部，我们传递一个 POST 请求以及我们要发布表单数据的服务器 URL。

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

Step 6 - 因此，最后我们使用 send() 函数将请求和 FormData 对象一起发送到服务器。

zhttp.send(myForm);

现在，让我们借助示例来讨论这一点：

Example 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>

Output

因此，当用户单击“提交”按钮时，将调用 dataDoc() 函数。然后，dataDoc() 函数首先创建新的 XHR 对象和新的 FormData 对象。然后，使用 append() 方法在 FormData 对象中添加新的键值对。接下来，它设置了处理来自服务器的响应的回调函数。当 readyState 属性的值 = 4 且 Status 属性的值 = 201 时，将触发此函数。最后，它调用 open() 方法并使用服务器的 URL 通过 HTTP POST 方法对其进行初始化，最后它调用 send() 方法将 FormData 请求发送到服务器。

因此，当响应来自服务器时，回调函数将显示结果并在控制台日志中打印“表单数据已成功发布”消息。

Example 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>

Output

在下图中，在输入详细信息后，当我们单击“提交”按钮时，数据将发送到服务器，服务器返回 ID 并在控制台中显示消息。

在上面的代码中，我们从用户那里收集数据，并使用 JavaScript 与 XMLHttpRequest 提交数据。

因此，当用户单击“提交记录”按钮时，将调用 sendFormData() 函数。sendFormData() 函数首先创建新的 XHR 对象和新的 FormData 对象。它追加使用 append() 方法由用户输入的键及其值的表单数据。接下来，它设置了处理来自服务器的响应的回调函数。当 readyState 属性的值 = 4 且 Status 属性的值 = 201 时，将触发此函数。最后，它调用 open() 方法并使用服务器的 URL 通过 HTTP POST 方法对其进行初始化，最后它调用 send() 方法将 FormData 请求发送到服务器。

来自服务器的响应，回调函数显示结果并在控制台日志中打印消息。

Conclusion

因此，这就是我们如何使用 FormData 对象。它也是用于存储各种类型数据的重要的对象，例如文件、纯文本、JSON 文档等。在下一篇文章中，我们将学习如何使用 XMLHttpRequest 发送 POST 请求。