答案：文章介绍了Web开发中将HTML表单数据序列化的三种常用方法。首先推荐使用FormData对象，它能自动收集表单数据并支持文件上传，兼容IE10及以上版本，适合普通提交和AJAX请求；其次可手动拼接URL查询字符串，通过遍历表单元素生成name=value格式的字符串，适用于轻量级或需兼容旧浏览器的场景；最后是将表单转为JSON格式，便于对接REST API，利用JavaScript构造对象后序列化为JSON字符串，适合后端期望接收JSON数据的情况。根据实际需求选择合适方式即可。
在Web开发中，经常需要将HTML表单中的数据转换为字符串格式，以便通过AJAX发送到服务器。JavaScript提供了多种方式来实现表单数据的序列化。下面介绍几种常见且实用的方法。
使用FormData对象（推荐）
FormData 是现代浏览器提供的一种原生接口，可以方便地从表单中收集数据，并支持文件上传。
示例代码：
const form = document.getElementById('myForm');
const formData = new FormData(form);
// 遍历所有字段
for (let [key, value] of formData.entries()) {
console.log(key + ': ' + value);
}
// 发送数据（例如使用fetch）
fetch('/submit', {
method: 'POST',
body: formData
});
优点：自动处理文件输入、无需手动编码、兼容性良好（IE10+）。
手动拼接URL查询字符串
如果不想依赖FormData，也可以通过遍历表单元素，手动构建类似 name=value&age=25 的字符串。
立即学习“Java免费学习笔记（深入）”；
实现方法：
function serialize(form) {
const params = [];
const fields = form.querySelectorAll('input, select, textarea');
for (let el of fields) {
// 忽略未命名、禁用或类型为submit/button等的元素
if (!el.name || el.disabled || ['submit', 'button', 'file'].includes(el.type)) continue;
let value = el.value;
// 处理多选框
if (el.type === 'checkbox' && !el.checked) continue;
if (el.type === 'radio' && !el.checked) continue;
// 编码键和值
params.push(encodeURIComponent(el.name) + '=' + encodeURIComponent(value));
}
return params.join('&');
}
调用方式：const data = serialize(document.getElementById('myForm'));
结果如：username=john&email=john%40example.com
转换为JSON格式
有时后端期望接收JSON数据，这时可将表单数据整理成对象再转为JSON字符串。
function formToJSON(form) {
const obj = {};
const fields = form.querySelectorAll('input, select, textarea');
for (let el of fields) {
if (!el.name || el.disabled) continue;
if (el.type === 'checkbox') {
if (el.checked) {
if (!obj[el.name]) obj[el.name] = [];
obj[el.name].push(el.value);
}
} else if (el.type === 'radio' && el.checked) {
obj[el.name] = el.value;
} else if (el.type !== 'checkbox' && el.type !== 'radio') {
obj[el.name] = el.value;
}
}
return JSON.stringify(obj);
}
使用场景：配合 fetch 发送JSON请求时非常有用。
基本上就这些常用方法。根据项目需求选择合适的方式即可。如果是普通提交或带文件上传，优先使用 FormData；若需灵活控制结构或对接REST API，可考虑转成JSON。手动拼接适合轻量级场景或兼容老环境。
