本文详解如何用 jquery 正确收集多个同名模式的表单输入（如 name_[1]、score_[2]），并通过 ajax 发送为结构化数组（扁平数组或嵌套对象），避免 `.val()` 仅返回首项的常见错误。
在 Web 表单开发中，动态增删的多组字段（如学生姓名与分数、商品 SKU 与数量）常需以数组形式提交。但若直接对多个 使用 $('input[name^="name_"]').val()，jQuery 会仅返回第一个匹配元素的值——这是导致“只传了第一条数据”的根本原因。
✅ 正确收集所有输入值：用 .map().get() 构建数组
.map() 是 jQuery 提供的遍历工具，它返回一个 jQuery 对象（含转换后的值），调用 .get() 后转为标准 JavaScript 数组：
// 收集所有 name_[*] 的值 → ["alex", "john", "lisa"]
let names = $('input[name^="name_"]').map(function() {
return this.value.trim(); // 建议 trim() 防空格干扰
}).get();
// 收集所有 score_[*] 的值 → ["30", "70", "95"]
let scores = $('input[name^="score_"]').map(function() {
return this.value;
}).get();⚠️ 注意：this.value 比 $(this).val() 更高效（避免重复 jQuery 封装），且 .map() 内部 this 始终指向原生 DOM 元素。
? 进阶方案：按 ID 分组构建嵌套结构（推荐）
若后端期望类似 [1] => ['name' => 'alex', 'score' => '30'] 的结构，可借助正则提取 ID 并归组：
// 初始化空对象用于分组
let groupedData = {};
// 统一处理所有 student[*][*] 类型输入（兼容你提到的第二种 HTML 结构）
$('input[name]').filter('[name*="["]').each(function() {
const name = this.name;
const value = this.value.trim();
// 匹配 student[1][name] 或 name_[1] 等模式，提取 ID（数字）
const idMatch = name.match(/(?:name_|student\[|^\[)(\d+)(?:\]|_\[?)/);
if (!idMatch) return;
const id = idMatch[1];
if (!groupedData[id]) groupedData[id] = {};
// 解析字段名：从 name_[1] → 'name'；student[1][score] → 'score'
const fieldMatch = name.match(/\[(\w+)\]$/);
const field = fieldMatch ? fieldMatch[1] : name.replace(/_\[\d+\]$/, '');
groupedData[id][field] = value;
});
// 最终 groupedData 示例：
// { "1": { "name": "alex", "score": "30" }, "2": { "name": "john", "score": "70" } }? 提示：该逻辑自动适配两种 HTML 结构——无论是 name_[1]/score_[1]，还是 student[1][name]/student[1][score]，均能正确解析 ID 与字段名。
? 发送至后端：完整 Ajax 示例
$.ajax({
url: '../util/funcs.php',
type: 'POST',
data: {
a: 'backendFunction',
// 方案一：扁平数组（后端收为 $_POST['names'], $_POST['scores']）
names: names,
scores: scores,
// 方案二：嵌套结构（后端收为 $_POST['students']，PHP 自动转为关联数组）
students: groupedData
},
dataType: 'json'
})
.done(function(response) {
console.log('Success:', response);
})
.fail(function(xhr) {
console.error('Request failed:', xhr.status, xhr.statusText);
});? 后端 PHP 接收建议（供参考）
-
若发送 names 和 scores：
$names = $_POST['names'] ?? []; // 自动为数组 $scores = $_POST['scores'] ?? []; $ids = array_keys($names); // 或从 input name 属性中解析
-
若发送 students（推荐）：
$students = $_POST['students'] ?? []; foreach ($students as $id => $data) { $name = $data['name'] ?? ''; $score = (int)($data['score'] ?? 0); // 插入数据库或进一步处理... }
✅ 总结关键点
- ❌ 错误：$('input[name^="..."]').val() → 仅返回首个值
- ✅ 正确：$('input[...]').map(...).get() → 返回完整数组
- ? 进阶：用 .each() + 正则解析 name 属性，实现智能分组
- ? 前后端约定：优先采用嵌套结构（如 students[1][name]），语义清晰、扩展性强
- ? 调试技巧：在发送前 console.log(JSON.stringify(groupedData)) 验证数据结构
掌握此模式后，你可轻松应对任意动态表单数组场景——无论是课程报名、订单明细，还是配置项管理。
