本文详解如何通过 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] =youjiankuohaophpcn ['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 正则分组处理...
通过以上方式，你既能实现简洁的扁平数组提交，也能构建出高度结构化的嵌套数据，兼顾前端可维护性与后端处理效率。
