表单数据序列化是将HTML表单字段转换为可传输字符串的方法，常用于AJAX或URL参数传递。1. 使用FormData对象：支持文本和文件字段，与fetch兼容，自动编码，适合复杂表单；2. 使用URLSearchParams：轻量级，适用于仅含文本字段的GET请求或application/x-www-form-urlencoded格式提交；3. 手动序列化：遍历form.elements，过滤有效字段并encodeURIComponent编码，拼接为键值对字符串，兼容旧浏览器。
表单数据序列化是将HTML表单中的字段和值转换为可以在网络上传输的字符串格式，通常用于AJAX请求或URL参数传递。在前端开发中，掌握表单序列化方法能有效提升数据处理效率。
使用FormData对象进行序列化
FormData 是现代浏览器提供的原生API，适合处理包括文件上传在内的复杂表单数据。
优点：- 支持文本字段和文件输入（如 type="file"）
- 与XMLHttpRequest和fetch天然兼容
- 自动处理编码，无需手动拼接字符串
用法示例：
const form = document.getElementById('myForm');
const formData = new FormData(form);
// 可通过遍历获取键值对
for (let [key, value] of formData) {
console.log(key, value);
}
// 发送请求
fetch('/submit', {
method: 'POST',
body: formData
});
使用URLSearchParams进行键值对编码
当表单只包含简单文本字段且需要以查询字符串形式提交时，URLSearchParams 是轻量选择。
立即学习“前端免费学习笔记（深入）”；
- GET请求拼接参数
- 不需要上传文件的表单
- 希望输出标准application/x-www-form-urlencoded格式
示例代码：
const params = new URLSearchParams();
params.append('username', 'john');
params.append('age', '25');
fetch('/search?' + params.toString());
// 或直接作为body发送（Content-Type会自动设置）
fetch('/submit', {
method: 'POST',
body: params
});
手动序列化为查询字符串
在不支持现代API的老浏览器中，可通过遍历表单元素手动构建查询字符串。
基本逻辑：
- 获取form.elements，遍历所有可提交元素
- 过滤掉无效或禁用的字段
- 对名称和值进行encodeURIComponent编码
- 拼接成 key=value&key2=value2 格式
简易实现：
function serialize(form) {
const parts = [];
const fields = form.elements;
for (let i = 0; i < fields.length; i++) {
const field = fields[i];
if (field.name && !field.disabled && field.type !== 'file') {
let value = '';
if (field.type === 'select-multiple') {
for (let j = 0; j < field.options.length; j++) {
if (field.options[j].selected) {
value = encodeURIComponent(field.options[j].value);
parts.push(`${field.name}=${value}`);
}
}
} else if (!field.type.match(/radio|checkbox/) || field.checked) {
value = encodeURIComponent(field.value);
parts.push(`${field.name}=${value}`);
}
}
}
return parts.join('&');
}
基本上就这些常用方式。根据项目环境和需求选择合适的方法即可。 
