最简洁方式是用 formdata + object.fromentries() 转为对象,再 json.stringify() 发送;需手动处理复选框、多选下拉等多值字段,并注意空值、类型转换及文件上传限制。

直接用 FormData + Object.fromEntries() 最简洁,再配合 JSON.stringify() 即可发送。
获取表单元素并转为普通对象
推荐用原生方式,不依赖框架或库:
- 选中表单:
const form = document.querySelector('#myForm'); - 提取键值对:
const data = Object.fromEntries(new FormData(form)); - 此时
data是一个普通 JavaScript 对象,如{username: "admin", email: "a@b.c"}
处理特殊字段(复选框、多选下拉等)
FormData 默认对同名多值只保留最后一个,需手动修正:
- 复选框组(
name="hobby"):先用form.querySelectorAll('input[name="hobby"]:checked')收集所有选中值,再转数组 - 多选
<select multiple></select>:用Array.from(select.selectedOptions).map(opt => opt.value) - 建议封装一个增强版序列化函数,统一处理这些情况
发送 JSON 到后端
构造请求时注意设置正确头部:
fetch('/api/submit', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(data)})
注意事项
避免常见坑:
-
空值和未填字段:
FormData不包含未勾选的复选框或未选中的select,如需保留默认空值,得手动补全 -
数字/布尔类型丢失:表单所有值都是字符串,后端需自行转换,或前端用
parseInt/Boolean预处理 -
文件字段不能直接 JSON 化:含文件上传时,不能用
JSON.stringify,应改用FormData原生提交
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











