formdata 是二进制兼容的传输载体,不能直接 tostring();需用 urlsearchparams 转为查询字符串,它自动编码并支持多值字段,且兼容现代浏览器。

直接用 FormData 就行,但得清楚它不等于“字符串序列化”——它本身是二进制兼容的传输载体,真要转成 key=value& 查询字符串,得过一道 URLSearchParams。
FormData 构造后不能直接 toString()
FormData 设计目标是原生支持文件 + 文本混合提交,内部不强制编码为 URL 字符串格式。调用 formData.toString() 会返回 [object FormData],毫无意义。
- 它适合直接传给
fetch()或XMLHttpRequest.send(),此时浏览器自动设置Content-Type: multipart/form-data(含文件)或application/x-www-form-urlencoded(纯文本,取决于是否有文件) - 如果表单里有
<input type="file">,FormData是唯一能正确携带二进制内容的方式 - 没有文件时,它仍会按规范编码值(比如空格变
+,中文变%E4%BD%A0),但你拿不到原始字符串
想得到标准查询字符串?用 URLSearchParams 转
这是最干净、兼容性够用(Chrome 49+、Firefox 44+、Safari 10.1+)的做法:
const form = document.getElementById('myForm');
const formData = new FormData(form);
const searchParams = new URLSearchParams(formData);
console.log(searchParams.toString()); // → "username=john&age=25&hobby=%E7%AF%AE%E7%90%83"
-
URLSearchParams构造函数接受FormData实例,自动遍历所有键值对并做encodeURIComponent - 对多选
<select multiple></select>或多个同名checkbox,它天然生成多个hobby=篮球&hobby=足球,符合服务器端接收习惯 - 如果某个字段值是
null或undefined,FormData会把它转成空字符串,URLSearchParams也会照常编码 —— 这和 jQuery 的.serialize()行为一致
radio/checkbox 未选中时不会出现在 FormData 里
这是 HTML 规范定义的“成功控件”行为,不是 bug:只有 checked 为 true 的 radio 和 checkbox 才被收集。
- 如果你需要“未选中也传
false”,不能依赖FormData原生逻辑,得自己补全 - 常见做法:先获取所有
name相同的input[type=radio]元素,检查是否至少一个被选中;没选中就手动append(name, 'false') - 或者换思路:后端约定“缺失即
false”,前端完全不传 —— 更轻量,也更符合 RESTful 风格
别用 jQuery serialize() 除非项目已重度依赖
jQuery.serialize() 不支持文件上传,且在现代项目中属于冗余依赖。
- 它输出的是查询字符串,但无法处理
File对象,也不兼容fetch的二进制流机制 - 如果你只是想把表单转成对象,
Object.fromEntries(new FormData(form))更直接(ES2019+) - 注意:
Object.fromEntries()会覆盖同名字段(如多个hobbycheckbox),需要数组语义时必须用URLSearchParams或手写 reduce
真正容易被忽略的是:表单控件是否“成功”不只看 name 和 value,还取决于 disabled、checked、selected 状态,以及是否为 file 类型 —— 这些都由 FormData 自动遵循规范处理,但手动遍历时极易漏判。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











