本文详解如何用 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'] 是否为合法数组及字段完整性。
通过以上方法，你既能实现简洁的平行数组提交，也能优雅支持深层嵌套结构，让前后端数据契约清晰、可维护性强。
