如何使用 jQuery Ajax 清晰、规范地提交表单数组数据（含嵌套结构）

本文详解如何用 jquery 正确收集多组同名输入框（如 name_[1]、score_[1]）的值，并通过 ajax 以数组或嵌套对象形式发送至后端，避免 `.val()` 仅返回首项的常见错误。

在构建动态表单（如学生信息批量录入、订单商品列表等）时，常需将多个结构化输入项打包为数组提交。但初学者易误用 $('input[name^="xxx"]').val() —— 该方法仅返回第一个匹配元素的值，导致后端只收到单个字符串而非完整数组。

✅ 正确收集所有输入值：使用 .map().get()

要获取所有匹配 的值，必须显式遍历 DOM 元素集合：

// 收集所有 name_[*] 输入值（按 DOM 顺序）
let names = $('input[name^="name_"]').map((i, el) => el.value).get();
let scores = $('input[name^="score_"]').map((i, el) => el.value).get();

// 发送为两个平行数组
$.ajax({
  url: '../util/funcs.php',
  method: 'POST',
  data: {
    a: 'backendFunction',
    names: names,
    scores: scores
  }
});

此时 PHP 后端可直接接收为：

// $_REQUEST['names'] → ['alex', 'john']
// $_REQUEST['scores'] → ['30', '70']

? 进阶方案：按 ID 分组构建嵌套结构（推荐）

若希望后端接收到类似 [1] => ['name'=>'alex','score'=>30] 的关联结构，需在前端主动解析 name 属性中的索引，并归并数据：

// 初始化空对象存储分组数据
let groupedData = {};

// 统一选取所有相关输入（支持 name_ 和 score_）
$('input[name^="name_"], input[name^="score_"]').each(function() {
  const $el = $(this);
  const nameAttr = $el.attr('name');

  // 匹配 name_[n] 或 score_[n] 中的数字 n
  const match = nameAttr.match(/_(\d+)\]/);
  if (!match) return;

  const id = match[1];
  const key = nameAttr.includes('name_') ? 'name' : 'score';

  // 初始化该 ID 对象（若不存在）
  if (!groupedData[id]) {
    groupedData[id] = {};
  }
  groupedData[id][key] = $el.val();
});

// 发送嵌套对象（jQuery 会自动序列化为 student[1][name]=alex&student[1][score]=30...）
$.ajax({
  url: '../util/funcs.php',
  method: 'POST',
  data: {
    a: 'backendFunction',
    student: groupedData  // 关键：以 student 为顶层键
  }
});

? 注意：jQuery 的 data 对象若包含嵌套对象（如 student: { '1': {name:'a',score:90} }），会自动按 PHP 数组语法编码（即 student[1][name]），后端 $_POST['student'] 将直接解析为关联数组。

? 动态选择器技巧：精准匹配带方括号的 name

当 HTML 使用 name="student[1][name]" 格式时，CSS 选择器中的 [ 和 ] 是特殊字符，需转义：

// ❌ 错误：未转义，语法无效
// $('input[name^="student["]')

// ✅ 正确：用双反斜杠转义
let allStudentInputs = $('input[name^="student\\["]').map(function() {
  return this.value;
}).get();

更健壮的做法是结合属性存在性与模式匹配：

// 匹配所有 name 属性包含 "student[" 的 input
$('input[name*="student["]').map((i, el) => ({
  name: el.name,
  value: el.value
})).get();

⚠️ 注意事项与最佳实践

• 确保 name 属性唯一且语义清晰：避免 name="name_[1]" 与 name="name_[2]" 混用其他前缀，否则正则易出错。
• 空值处理：.map() 不过滤空值，建议添加校验：

  .map((i, el) => el.value.trim() ? el.value : null)
  .get()
  .filter(v => v !== null);

• 使用 serializeArray() 辅助解析：对标准表单，可先用 $('#form').serializeArray() 获取键值对数组，再按需重组。
• 后端验证不可省略：前端构造的结构可能被篡改，PHP 端务必校验 $_POST['student'] 是否为合法数组及字段完整性。

通过以上方法，你既能实现简洁的平行数组提交，也能优雅支持深层嵌套结构，让前后端数据契约清晰、可维护性强。