FormData 对象在 JavaScript 中可用于异步上传文件和发送表单数据。当需要通过 AJAX 技术发送表单数据时，使用 FormData 可以很容易地读取表单内的值、处理文件上传和构建键值对数据，而不必手动构造请求正文。如此可以简化通过 XMLHttpRequest 或 Fetch API 提交表单的过程、提高开发效率和用户交互体验。
FormData 对象提供一种表示表单数据的键/值对的构造方式，并可以使用 XMLHttpRequest 的 send() 方法发送。即使是文件上传，FormData 也能够轻松地异步上传，因为它支持二进制文件的序列化。FormData 通常与 AJAX 和 Fetch API 结合使用，使得提交表单数据和文件变得非常简单，不需显式地在 JavaScript 中设置 HTTP 请求头部。
一、创建 FORMDATA 对象
在 JavaScript 中，首先要创建一个 FormData 对象实例：
const formData = new FormData();
这个实例可以独立于任何表单创建。如果在构造函数中传入一个表单元素，则 FormData 对象会自动提取该表单的所有字段值。
const formElement = document.querySelector('form');
const formData = new FormData(formElement);
二、向 FORMDATA 对象添加数据
添加键值对
FormData 对象提供了 append() 方法来添加键值对。这个方法接受两个参数，第一个参数是键（name），第二个参数是值（value）：
formData.append('username', 'JohnDoe');
formData.append('age', 30);
文件上传
若需上传文件，可以将第二个参数设置为文件输入字段的文件对象：
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];
formData.append('profilePic', file);
三、使用 FORMDATA 与 XMLHTTPREQUEST
Ajax技术的核心是 XMLHttpRequest 对象，与 FormData 结合发起请求是十分常见的应用：
const xhr = new XMLHttpRequest();
xhr.open('POST', '/submit-form');
// 设置期望的返回数据类型
xhr.responseType = 'json';
// 监听请求状态变化
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log('Data submitted successfully:', xhr.response);
} else {
console.error('An error occurred:', xhr.statusText);
}
}
};
// 发送 FormData 对象
xhr.send(formData);
四、与 FETCH API 整合
Fetch API 提供了一个现代化的方式来发起网络请求。它返回一个 Promise，使得与 FormData 结合使用非常简便：
fetch('/submit-form', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch((error) => console.error('Error:', error));
五、FORMDATA 对象的其他方法
获取表单数据
FormData 对象提供 get() 和 getAll() 方法可以用来检索表单数据：
// 获取键为 'username' 的值
const username = formData.get('username');
// 获取键为 'profilePic' 的值，假设是一个文件字段
const profilePics = formData.getAll('profilePic');
检查表单数据键
FormData 对象还有 has() 方法，用于检查是否存在某个键：
if (formData.has('username')) {
console.log('Username field is set.');
}
六、删除和修改 FORMDATA 对象的数据
FormData 对象同样也允许你删除或者替换已存在的键值对：
删除键值对
formData.delete('username');
替换已有的数据
formData.set('username', 'JaneDoe');
七、FORMDATA 和 HTTP 请求
在使用 FormData 对象与后端接口交互时，很重要的一点是后端服务必须支持 multipart/form-data MIME 类型的解析。这种 MIME 类型通常用于表单提交，并且允许发送非 ASCII 码以及二进制数据，使得文件上传成为可能。
八、结束语
总结来说，FormData 便捷地帮助开发者处理表单数据。通过使用 FormData，开发者可以轻松处理键值对数据、上传文件，并最终通过 XMLHttpRequest 或 Fetch API 将这些数据异步发送到服务器。FormData 对象的方法简单直观，是现代 Web 开发中处理表单数据的得力工具。
相关问答FAQs：
如何在 JavaScript 中使用 FormData 对象？
-
什么是 FormData 对象？
FormData 对象是一种特殊的 JavaScript 对象，用于在表单中收集数据。它主要用于将表单数据以键值对的方式组织，从而可以轻松地将数据发送到服务器。 -
如何创建 FormData 对象？
要创建 FormData 对象，只需使用 new 关键字并声明一个新的 FormData 变量即可。例如：var formData = new FormData(); -
如何向 FormData 对象添加数据？
您可以使用 FormData 对象的 append() 方法来向其中添加数据。该方法接受两个参数：第一个参数是键（即表单字段的名称），第二个参数是值。例如：formData.append('username', 'John'); -
如何使用 FormData 对象发送数据到服务器？
要发送 FormData 对象中的数据到服务器，您可以使用 XMLHttpRequest 对象或 Fetch API。通过将 FormData 对象作为参数传递给 send() 方法，您可以将数据发送到服务器。例如：
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/submit', true);
xhr.send(formData);
- FormData 对象与普通的表单提交有什么区别？
与传统的表单提交相比，使用 FormData 对象可以更灵活地收集和发送数据。它可以处理文件上传以及其他复杂的表单数据，而无需手动构建表单数据字符串。此外，FormData 对象还支持在同一表单中多次使用相同字段名的情况。
