使用JavaScript将HTML表单转换为JSON有多种方法。1. 利用FormData与Object.fromEntries()：const form = document.getElementById('myForm'); const formData = new FormData(form); const jsonData = Object.fromEntries(formData); 该方式简洁高效，适用于文本类输入。2. 手动遍历元素：可精细控制，处理复选框、过滤空值等，function formToJSON(form) { const data = {}; for (const el of form.elements) { if (el.name && !el.disabled) { if (el.type === 'checkbox') { if (!data[el.name]) data[el.name] = []; if (el.checked) data[el.name].push(el.value); } else if (el.type !== 'submit' && el.type !== 'button') { data[el.name] = el.value; } } } return data; } 能应对复杂结构。3. jQuery方式：$('#myForm').serializeArray(); 再转为对象，适合老项目。注意事项：确保表单元素有name属性，disabled元素不会被收集，file类型建议用FormData传输，注意日期、数字类型的格式兼容。推荐优先使用原生FormData + Object.fromEntries()方案，简洁且现代浏览器支持良好。
将HTML表单数据转换为JSON格式是前端开发中常见的需求，尤其在通过AJAX提交数据时。浏览器原生不直接提供“form to JSON”的方法，但可以通过JavaScript轻松实现。下面介绍几种实用的方法与实例。
使用FormData对象配合Object.fromEntries()
现代浏览器支持 FormData 和 Object.fromEntries()，可以快速将表单数据转为JSON对象。
示例代码：
const form = document.getElementById('myForm');
const formData = new FormData(form);
const jsonData = Object.fromEntries(formData);
console.log(jsonData); // 输出：{ username: "张三", email: "zhang@example.com" }
这种方法简洁高效，适用于大多数文本类输入（如 input、textarea、select）。
手动遍历表单元素构建JSON
对于需要更精细控制的场景，比如过滤空值、处理复选框或文件输入，可手动遍历表单字段。
立即学习“前端免费学习笔记（深入）”；
示例代码：
function formToJSON(form) {
const data = {};
for (const el of form.elements) {
if (el.name && !el.disabled) {
if (el.type === 'checkbox') {
if (!data[el.name]) data[el.name] = [];
if (el.checked) data[el.name].push(el.value);
} else if (el.type !== 'submit' && el.type !== 'button') {
data[el.name] = el.value;
}
}
}
return data;
}
const form = document.getElementById('myForm');
const jsonData = formToJSON(form);
console.log(jsonData);
这种方式灵活，能处理复杂结构，比如多选checkbox返回数组。
使用jQuery序列化并转换（传统方式）
如果项目中使用了jQuery，可以用 serializeArray() 方法再转成JSON。
示例代码：
const serializedArray = $('#myForm').serializeArray();
const jsonData = {};
$.each(serializedArray, function(i, field) {
jsonData[field.name] = field.value;
});
console.log(jsonData);
虽然依赖jQuery，但在老项目中依然广泛使用。
注意事项与建议
转换过程中需注意以下几点：
- 确保每个表单元素都有 name 属性，否则无法收集数据
- disabled 的元素不会被包含在 FormData 或 serialize 中
- 文件类型（file）输入默认转为File对象，发送时建议用 FormData 而非纯JSON
- 日期、数字等输入类型需注意前后端格式兼容性
基本上就这些。选择哪种方式取决于项目环境和需求复杂度。现代原生JS方案已足够强大，推荐优先使用 FormData + Object.fromEntries()。不复杂但容易忽略细节。
