推荐使用 object.fromentries(new formdata(form)) 将表单序列化为 json 对象，现代浏览器兼容；需兼容旧环境或精细控制时，应手动遍历 form.elements 并按控件类型分类处理。
JavaScript 中序列化整个表单为 JSON 对象，最直接可靠的方式是使用 FormData 配合手动遍历，或借助原生 form.elements 提取字段值并结构化组装。不推荐直接用 JSON.stringify(form)（会得到空对象或报错），也不依赖已淘汰的 jQuery .serializeArray()（除非项目仍在用 jQuery）。
用 FormData + Object.fromEntries() 转成标准 JSON 对象
这是现代浏览器（Chrome 49+、Firefox 44+、Edge 16+、Safari 10.1+）推荐做法，自动处理多选、文件输入（仅获取名称）、同名字段等：
- 创建
FormData实例传入表单元素 - 用
Object.fromEntries(new FormData(form))得到键值对对象 - 再用
JSON.stringify()序列化（如需字符串）或直接使用该对象
示例：
const form = document.querySelector('#myForm');
const data = Object.fromEntries(new FormData(form));
console.log(data); // { username: "alice", email: "a@b.com", hobbies: "reading" }
console.log(JSON.stringify(data)); // {"username":"alice","email":"a@b.com","hobbies":"reading"}
手动遍历 form.elements 处理更复杂场景
当需要兼容老浏览器（如 IE），或要特殊处理复选框（多个同名）、禁用字段、空值过滤、类型转换（如数字/布尔）时，建议手动遍历：
- 遍历
form.elements，跳过disabled和无name的控件 - 对
type="checkbox"或type="radio"，只收集已勾选的值；多选<select multiple></select>取所有选中项数组 - 可选：将数字型 value 自动转为
Number，"true"/"false"转为布尔
简易实现示例：
function serializeFormToJSON(form) {
const json = {};
for (const el of form.elements) {
if (!el.name || el.disabled) continue;
const { name, type, value } = el;
if (type === 'checkbox' || type === 'radio') {
if (!el.checked) continue;
if (json[name] !== undefined) {
if (!Array.isArray(json[name])) json[name] = [json[name]];
json[name].push(value);
} else {
json[name] = value;
}
} else if (type === 'select-multiple') {
json[name] = Array.from(el.selectedOptions).map(opt => opt.value);
} else {
json[name] = value;
}
}
return json;
}
const data = serializeFormToJSON(document.querySelector('#myForm'));
console.log(JSON.stringify(data));
注意边界情况和常见坑
实际使用中容易忽略这些细节：
-
文件输入（）：FormData 会包含文件对象（无法直接 JSON.stringify），若只需文件名，可用
el.files[0]?.name；若需上传，应配合fetch直传 FormData，而非转 JSON -
空字符串与 null/undefined：默认 value 为空字符串，如需转为
null或跳过，需额外判断 -
按钮类元素（submit/reset/button）：它们有
name但通常不应提交，建议在遍历时排除type === 'submit' || type === 'reset' || type === 'button' - 数据类型丢失：HTML 表单所有 value 都是字符串，JSON 序列化后仍是字符串；如需数字/布尔，请在解析后手动转换
一句话总结推荐方案
现代项目优先用 Object.fromEntries(new FormData(form))；需兼容旧环境或精细控制时，手动遍历 form.elements 并按控件类型分类处理。避免直接 JSON.stringify(form) 或依赖已弃用 API。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
