使用URLSearchParams可将表单数据序列化为标准查询字符串，如new URLSearchParams(new FormData(form)).toString()生成"username=alice&age=25&token=abc123"，自动编码特殊字符，推荐用于现代浏览器环境。
HTML表单数据序列化是将表单中的字段和值转换为URL编码字符串的过程，常用于通过Ajax发送数据或构建查询参数。这个过程可以手动实现，也可以借助浏览器原生API或JavaScript库自动完成。
使用URLSearchParams序列化表单
URLSearchParams 是现代浏览器提供的接口，能方便地将表单数据转为标准查询字符串格式。
示例：给定一个表单：
使用 URLSearchParams 序列化：
立即学习“前端免费学习笔记（深入）”；
const form = document.getElementById('myForm');
const params = new URLSearchParams(new FormData(form));
const serialized = params.toString(); // "username=alice&age=25&token=abc123"
这种方法简洁、安全，自动处理特殊字符的编码。
使用FormData与Ajax结合
虽然 FormData 对象本身不是字符串，但它可以直接用于 fetch 或 XMLHttpRequest 中，无需手动序列化为字符串。
const formData = new FormData(form);
fetch('/submit', {
method: 'POST',
body: formData // 浏览器自动设置合适的 Content-Type
});
如果需要获取字符串形式，仍可通过 URLSearchParams 转换。
手动序列化（兼容旧环境）
在不支持现代API的环境中，可以通过遍历表单元素手动拼接字符串。
基本实现逻辑：- 获取所有可提交的表单控件（如 input、select、textarea）
- 过滤掉 disabled 元素和无 name 属性的项
- 对 name 和 value 进行 encodeURIComponent 编码
- 按 “name=value” 格式拼接，用 & 连接
function serialize(form) {
const parts = [];
const fields = form.querySelectorAll("input, select, textarea");
for (let field of fields) {
if (!field.name || field.disabled) continue;
if (field.type === "checkbox" && !field.checked) continue;
if (field.type === "radio" && !field.checked) continue;
const name = encodeURIComponent(field.name);
const value = encodeURIComponent(field.value);
parts.push(name + "=" + value);
}
return parts.join("&");
}
用途与场景
表单序列化主要用于：
- 通过 Ajax 提交数据，避免页面刷新
- 将用户输入附加到 URL 查询参数中（如搜索表单）
- 日志记录或调试时查看表单内容
- 在单页应用中同步表单状态到路由或存储
正确序列化能确保数据格式统一、字符编码安全，提升前后端交互的稳定性。
基本上就这些。现代开发推荐优先使用 URLSearchParams 配合 FormData，兼顾可读性与兼容性。手动方法适合学习原理或特殊定制需求。
