jQuery 表单提交后如何获取结构化的 JSON 对象数据？

在 Web 开发中，使用 jQuery 处理表单是很常见的需求。很多初学者在提交表单时只用了 serialize 方法，得到的是类似 a=1&b=2 的字符串，难以在 JavaScript 中直接操作。如果希望拿到一个结构清晰、支持嵌套和数组的 JSON 对象，需要借助 serializeArray 并做二次加工。

为什么 serialize 不够用

jQuery 的 serialize 方法返回的是 URL 编码后的字符串，它适合直接挂在 AJAX 的 data 参数里，但不适合在本地做逻辑判断。例如一个表单里有两个同名的复选框，serialize 只会用 & 拼接，开发者还得自己 split 才能还原成数组。

serializeArray 则返回一个由 {name, value} 组成的数组，每个表单项是一条记录。这种方式更贴近原始 DOM 结构，方便我们写通用函数去归并。不过它依然不会自动识别中括号命名（如 user[name]）或重复名称，因此必须手动解析。

核心转换函数实现

下面这段代码可以把 serializeArray 的结果转换成嵌套对象。它支持 user[name] 这样的键名，也能把多个同名项收集为数组。我们在函数里用正则拆分路径，再逐层赋值。

function formToJSON(form) {
  var arr = $(form).serializeArray();
  var result = {};
  $.each(arr, function() {
    var name = this.name;
    var value = this.value;
    // 处理带中括号的命名，如 user[age]
    var keys = name.replace(/[/g, '.').replace(/]/g, '').split('.');
    var obj = result;
    for (var i = 0; i < keys.length; i++) {
      var k = keys[i];
      if (k === '') {
        // 空键表示数组，如 list[]
        if (!$.isArray(obj)) { obj = []; }
        obj.push(value);
        return;
      }
      if (i === keys.length - 1) {
        if (obj[k] !== undefined) {
          if (!$.isArray(obj[k])) { obj[k] = [obj[k]]; }
          obj[k].push(value);
        } else {
          obj[k] = value;
        }
      } else {
        if (obj[k] === undefined) { obj[k] = {}; }
        obj = obj[k];
      }
    }
  });
  return result;
}

上面的函数考虑了三种情况：普通字段直接赋值；带点号路径的嵌套字段逐层创建；同名或空括号字段转成数组。这样无论表单多复杂，都能得到干净的 JSON。

使用方式非常简单，只需在提交事件里调用即可。注意我们阻止了默认提交，改用 AJAX 发送 JSON 给后端，避免了页面刷新。

$('#myForm').on('submit', function(e) {
  e.preventDefault();
  var data = formToJSON(this);
  $.ajax({
    url: 'https://ipipp.com/api/save',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(data),
    success: function(res) {
      console.log('提交成功', res);
    }
  });
});

类型转换与边界处理

默认情况下，所有表单项的值都是字符串。如果后端期望数字或布尔，需要在归并时判断。比如可以给 input 加 data-type 属性，函数读取后用 Number 或 JSON.parse 转换。

另外，未选中的复选框不会出现在 serializeArray 里。若业务要求明确传 false，可以在函数开始前遍历所有 checkbox，把未选中的以值 false 补进数组。文件输入 type=file 无法序列化，需使用 FormData 对象，此时本方案不适用。

总结建议

对于现代前端项目，推荐始终通过 formToJSON 这类函数将表单转为结构化对象，再 JSON.stringify 发给后端。它比直接拼字符串更不易出错，也方便在提交前做校验和日志打印。

如果表单极其简单且无需嵌套，用 serialize 也无可厚非。但一旦涉及用户列表、地址簿等复合结构，结构化方案能省下大量联调时间。

jQueryform_serializationJSON_object修改时间：2026-08-07 14:48:16