精彩剖析——掌握 FormData 对象，探索 JavaScript 数据提交的奇妙世界

2024-02-09 21:28:16

深入 FormData 对象的内部运作机制

FormData 对象本质上是一个包含键值对的容器。这些键值对代表表单字段名称及其对应的值。通过 FormData 对象，你可以轻松地收集表单数据并将其发送到服务器。它最大的优势在于无需使用传统方法——将表单数据序列化成字符串——即可实现数据传输。

构建表单数据键值对的艺术

构建键值对是使用 FormData 对象的关键步骤。你可以通过两种方式来实现：

直接赋值法 ：你可以直接为 FormData 对象的属性赋值，就像这样：

const formData = new FormData();
formData.append("name", "John Doe");
formData.append("email", "johndoe@example.com");

append() 方法 ：append() 方法允许你以更详细的方式添加键值对。它接受两个参数：字段名称和字段值。例如：

const formData = new FormData();
formData.append("name", "John Doe");
formData.append("email", "johndoe@example.com");
formData.append("age", 25);

值得注意的是，你可以使用 append() 方法多次添加具有相同名称的字段。这通常用于文件上传，因为每个文件都可以作为具有相同名称的不同字段进行提交。

FormData 对象的多样性

除了处理常规表单字段外，FormData 对象还支持以下类型的数据：

文件：FormData 对象可以轻松地处理文件上传。你可以使用 append() 方法添加文件，就像这样：

const formData = new FormData();
formData.append("profile_picture", fileInputElement.files[0]);

Blob ：Blob 对象代表二进制数据。你可以使用 append() 方法添加 Blob 对象，就像这样：

const formData = new FormData();
formData.append("image_data", blob);

URLSearchParams ：URLSearchParams 对象代表 URL 查询参数。你可以使用 append() 方法添加 URLSearchParams 对象，就像这样：

const formData = new FormData();
formData.append("query_params", new URLSearchParams("name=John Doe&email=johndoe@example.com"));

发送 FormData 数据的多种途径

一旦你收集好表单数据，就可以使用以下方法之一将其发送到服务器：

XMLHttpRequest ：这是使用 FormData 对象发送数据的传统方法。你可以使用 XMLHttpRequest 对象的 send() 方法将 FormData 对象作为参数发送。例如：

const xhr = new XMLHttpRequest();
xhr.open("POST", "submit_form.php", true);
xhr.send(formData);

fetch() ：fetch() 方法是发送 FormData 数据的另一种现代方式。它使用 Promise 来处理请求和响应。例如：

fetch("submit_form.php", {
  method: "POST",
  body: formData
})
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.error(error));

jQuery ：如果你正在使用 jQuery，你可以使用 $.ajax() 方法来发送 FormData 数据。例如：

$.ajax({
  url: "submit_form.php",
  type: "POST",
  data: formData,
  success: function(result) {
    console.log(result);
  },
  error: function(error) {
    console.error(error);
  }
});