17370845950

表单数据序列化是将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('&');
}

基本上就这些常用方式。根据项目环境和需求选择合适的方法即可。