JavaScript 的 FormData 对象提供了一种便捷的方式来处理 HTML 表单数据，尤其是在使用 AJAX 或 fetch 发送数据到服务器时。 new FormData() 构造函数创建一个新的 FormData 实例。
你可以直接将 HTML 表单元素作为参数传递给 new FormData()。构造函数会自动收集表单中的所有输入字段数据，包括文本框、复选框、单选按钮以及文件上传字段，并将它们添加到 FormData 对象中。
使用 FormData 的优势
FormData 的主要优势在于简化了复杂数据的处理，特别是当表单包含多个字段或文件时。它会自动将数据格式化为合适的 HTTP 请求体，并设置必要的 multipart/form-data 头部信息。 这使得 FormData 成为现代 Web 应用中动态发送表单数据而无需页面刷新的理想选择，提供了高效灵活的表单处理方案。
无需表单元素的示例
以下示例演示了如何在不依赖表单元素的情况下创建 FormData 对象：
<code class="language-javascript">const formData = new FormData();
// 手动添加数据
formData.append('nombre', 'John Serrano');
formData.append('edad', 30);
formData.append('archivo', fileInput.files[0]);
// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
method: 'POST',
body: formData,
})
.then((response) => response.json())
.then((data) => {
console.log('服务器响应:', data);
})
.catch((error) => {
console.error('发送数据出错:', error);
});</code>说明:
FormData 对象。append() 方法手动添加键值对。例如，formData.append('nombre', 'John Serrano') 添加一个名为 nombre 值为 John Serrano 的字段。 你也可以直接添加文件，例如 fileInput.files[0]。fetch 发送 FormData 对象到服务器。fetch 会自动设置 Content-Type 头部为 multipart/form-data。这种方法在需要动态构建数据且不依赖 HTML 表单时非常有用。
使用表单元素的示例
以下示例演示了如何使用 HTML 表单元素创建 FormData 对象：
<code class="language-javascript">// 获取表单元素
const formulario = document.getElementById('miFormulario');
// 使用表单元素创建 FormData 对象
const formData = new FormData(formulario);
// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
method: 'POST',
body: formData,
})
.then((response) => response.json())
.then((data) => {
console.log('服务器响应:', data);
})
.catch((error) => {
console.error('发送数据出错:', error);
});</code>说明:
name 属性至关重要，因为它决定了 FormData 对象中的键名。new FormData()，构造函数会自动收集表单数据。fetch 发送数据到服务器。处理和序列化表单数据
某些 API（例如 JSON Placeholder）不接受 FormData 对象，而是期望 JSON 对象。 要将 FormData 转换为 JSON，你可以使用循环遍历其键值对：
<code class="language-javascript">const obj = {};
const formData = new FormData(form);
for (const key of formData.keys()) {
obj[key] = formData.get(key);
}</code>或者更简洁地使用 Object.fromEntries()：
<code class="language-javascript">const formData = new FormData();
// 手动添加数据
formData.append('nombre', 'John Serrano');
formData.append('edad', 30);
formData.append('archivo', fileInput.files[0]);
// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
method: 'POST',
body: formData,
})
.then((response) => response.json())
.then((data) => {
console.log('服务器响应:', data);
})
.catch((error) => {
console.error('发送数据出错:', error);
});</code>React 示例
<code class="language-javascript">// 获取表单元素
const formulario = document.getElementById('miFormulario');
// 使用表单元素创建 FormData 对象
const formData = new FormData(formulario);
// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
method: 'POST',
body: formData,
})
.then((response) => response.json())
.then((data) => {
console.log('服务器响应:', data);
})
.catch((error) => {
console.error('发送数据出错:', error);
});</code>总结
FormData 是 JavaScript 中处理表单数据的强大工具，它简化了数据收集和发送过程。虽然并非所有 API 都支持 FormData，但你可以轻松地将其转换为 JSON 等其他格式。 使用 FormData 可以提高表单处理的灵活性和效率，尤其是在使用 AJAX 或 fetch 时。
以上是JavaScript 中的 FormData：管理表单的权威指南的详细内容。更多信息请关注PHP中文网其他相关文章！
