HTML表单序列化方法整理

本文深入解析了HTML表单序列化的现代原生方案，重点阐明FormData并非直接生成查询字符串的工具，而是专为二进制兼容（尤其支持文件上传）设计的提交载体；若需标准key=value&...格式，应通过URLSearchParams进行干净、规范的转换，它天然支持多选、正确编码中文与空格，并忠实还原服务器端期待的参数结构；同时澄清了radio/checkbox未选中时不参与序列化的规范行为，指出需主动补全“false”值的场景及替代思路，并明确建议摒弃jQuery serialize()——因其存在disabled处理不一致、忽略文件、兼容性冗余等缺陷，而原生FormData+URLSearchParams组合更可靠、轻量且能准确捕获动态修改后的最新表单状态。

直接用 FormData 就行，但得清楚它不等于“字符串序列化”——它本身是二进制兼容的传输载体，真要转成 key=value&... 查询字符串，得过一道 URLSearchParams。

FormData 本身不输出字符串，它是个可提交对象

FormData 的设计目标是原生支持文件 + 文本混合提交，所以它内部不强制编码为 URL 字符串格式。调用 formData.toString() 会返回 [object FormData]，毫无意义。

• 它适合直接传给 fetch() 或 XMLHttpRequest.send()，此时浏览器自动设置 Content-Type: multipart/form-data（含文件）或 application/x-www-form-urlencoded（纯文本，取决于是否有文件）
• 如果表单里有 ，FormData 是唯一能正确携带二进制内容的方式
• 没有文件时，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
• 对多选 或多个同名 checkbox，它天然生成多个 hobby=篮球&hobby=足球，符合服务器端接收习惯
  注意：如果某个字段值是 null 或 undefined，FormData 会把它转成空字符串，URLSearchParams 也会照常编码 —— 这和 jQuery 的 .serialize() 行为一致，但不同于手动遍历时的 if (field.value) 判断

  radio/checkbox 未选中时不会出现在 FormData 里

  这是规范行为，不是 bug。HTML 表单的“成功控件”定义明确：radio 和 checkbox 只有在 checked 为 true 时才被收集。

  • 如果你需要“未选中也传 false”，不能依赖 FormData 原生逻辑，得自己补全
  • 常见做法：先获取所有 name 属性相同的 input[type=radio] 元素，检查是否至少一个被选中；没选中就手动 append(name, 'false')
  • 或者换思路：后端约定“缺失即 false”，前端完全不传 —— 更轻量，也更符合 RESTful 风格

  不要用 jQuery serialize() 除非项目已重度依赖它

  $('form').serialize() 确实方便，但它有硬伤：

  • 不处理 disabled 字段的逻辑和原生不一致（有些版本会忽略，有些会包含）
  • 对 type="number" 或 type="date" 输入框，可能拿到空字符串而非实际 value（取决于用户是否真的输入过）
  • 无法处理文件，遇到
  直接跳过，静默丢弃
• IE 11 及更老环境才需要它；现代项目用原生 API 更可控、无额外包体积

真正容易被忽略的是：FormData 构造时只读取当前 DOM 状态，如果表单字段是动态渲染或 JS 修改了 value 但没触发 input 事件，它照样取到最新值 —— 这点比靠事件监听的手动序列化更可靠。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~