如何使用 jQuery Ajax 清晰、高效地提交动态表单数组数据

本文详解如何通过 jquery 的 `.map().get()` 配合合理命名规则，将多组关联输入字段（如学生姓名与分数）构建成结构化数组，并以两种主流格式（扁平数组或嵌套对象）发送至后端。

在构建动态表单（如批量添加学生信息）时，常见需求是将多组同类型输入（如 name_[1] / score_[1]）按逻辑分组提交，而非仅传递首个值。默认使用 $('selector').val() 会只返回第一个匹配元素的值，这是导致“只有首项被发送”的根本原因。正确做法是显式遍历所有匹配元素并收集其值。

✅ 正确收集多个输入值：.map().get() 是核心

// 收集所有 name_[*] 和 score_[*] 的值（扁平数组）
const names = $('input[name^="name_"]').map((i, el) => el.value).get();
const 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 后端接收到的 $_POST['names'] 和 $_POST['scores'] 将是索引数组（如 ['alex', 'john']），可安全遍历处理。

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

若希望后端直接接收形如 [1] => ['name'=>'alex','score'=>30] 的结构，前端需主动构造对象数组：

// 提取所有带序号的 input，并按数字 ID 分组
const studentGroups = {};

// 匹配 name_[n] 或 score_[n]，提取 n
$('input[name^="name_"], input[name^="score_"]').each(function() {
  const match = this.name.match(/_(\d+)]$/);
  if (!match) return;
  const id = match[1];

  if (!studentGroups[id]) {
    studentGroups[id] = {};
  }

  // 根据 name 前缀存入对应字段
  if (this.name.startsWith('name_')) {
    studentGroups[id].name = this.value;
  } else if (this.name.startsWith('score_')) {
    studentGroups[id].score = this.value;
  }
});

// 转为标准数组（确保顺序，可选）
const students = Object.keys(studentGroups)
  .sort((a, b) => parseInt(a) - parseInt(b))
  .map(id => studentGroups[id]);

// 发送嵌套结构
$.ajax({
  url: '../util/funcs.php',
  method: 'POST',
  data: {
    a: 'backendFunction',
    students: students
  }
});

✅ 优势：后端 $_POST['students'] 直接是关联数组列表，语义清晰，无需额外解析 ID。

⚠️ 注意事项与最佳实践

• 避免 name="student[1][name]" 类 HTML 结构：虽 PHP 可自动解析为多维数组，但 jQuery 选择器难以可靠匹配动态数字（如 name^="student[" 会误匹配所有 student[*] 字段），且缺乏语义隔离。
• 始终验证输入完整性：分组逻辑中，若某 ID 缺少 name 或 score，应主动报错或跳过，避免后端空值异常。
• 使用 method: 'POST'：明确指定方法，避免 GET 请求长度限制及敏感数据暴露。
• 考虑使用 serializeArray() 辅助解析：对简单场景，可先 serializeArray() 获取键值对，再按规则归类：

  const formData = $('div').find('input').serializeArray();
  // 然后按 name 正则分组处理...

通过以上方式，你既能实现简洁的扁平数组提交，也能构建出高度结构化的嵌套数据，兼顾前端可维护性与后端处理效率。