使用Ajax提交表单时如何直接传递数组格式而非序列化数据

问题根因 #

出现需要手动解析的核心原因很简单：form.serialize() 本身返回的就是 key=value&key2=value2 格式的URL编码字符串，你把这整串字符串作为data字段的值提交后，PHP端拿到的就是纯文本内容，自然要手动拆成数组才能用。

可直接使用的实现方案 #

• 方案一：基于jQuery的轻量转换
  调用jQuery原生提供的serializeArray()方法拿到结构化的表单字段列表，将其映射为键值对对象后直接提交，和你现有代码的风格完全适配：

  var form = $(this);
  // 把[{name: 'xxx', value: 'yyy'}, ...] 结构的字段列表转成 {xxx: 'yyy'} 的普通对象
  var formFields = form.serializeArray().reduce(function(res, item) {
    res[item.name] = item.value;
    return res;
  }, {});
  
  $.ajax({
    url: '后端接口地址',
    type: 'POST',
    // 直接平铺提交字段，不要再套{data: xxx}的外层结构
    data: formFields
  })
  

• 方案二：原生FormData实现（兼容文件上传场景）
  直接借助浏览器原生的FormData对象读取表单内容，不用手动拼接结构，对带文件输入的表单兼容性更好：

  var form = $(this)[0]; // 获取原生DOM表单元素
  var formData = new FormData(form);
  
  $.ajax({
    url: '后端接口地址',
    type: 'POST',
    data: formData,
    // 必须关闭jQuery的默认序列化处理，否则会把FormData转成字符串格式
    processData: false,
    contentType: false
  })
  

提交后的后端效果 #

以上两种实现提交完成后，PHP的全局$_POST变量会直接生成对应字段的关联数组，可以直接通过$_POST['firstname']、$_POST['phone']读取字段值，完全不需要额外执行parse_str做字符串拆分。

常见踩坑提醒 #

• 不要在提交参数外层硬套{data: 表单数据}的壳，这种结构依然会让PHP需要从$_POST['data']取值，完全违背了简化后端处理的初衷。
• 使用FormData时必须配置processData: false和contentType: false，否则jQuery的默认逻辑会把原生FormData对象序列化成字符串格式，回到最初需要手动解析的问题。

内容的提问来源于stack exchange，提问作者tony