如何使用FormData获取单个键对应多个值的数组结果

先修正HTML的小问题 #

你的HTML里多个元素用了重复的id（比如两个sku），这违反了HTML规范（id必须唯一），建议改成唯一标识，比如sku-1、sku-2，name属性保持不变就行：

<div>
 <input value="saafasf" readonly="" id="sku-1" name="sku"> 
 <input value="3" readonly="" id="quantity-1" name="quantity">
 <input value="hjhkk" readonly="" id="sku-2" name="sku"> 
 <input value="3" readonly="" id="quantity-2" name="quantity">
</div>

核心解决方案：用FormData.getAll()方法 #

原生FormData本身就能收集同名表单控件的值，默认用get()方法只会拿到第一个值，换成getAll()就能直接获取对应键的所有值组成的数组。

示例代码：

// 获取包含所有input的容器
const container = document.querySelector('div');
// 基于容器创建FormData，自动收集所有表单控件的值
const formData = new FormData(container);

// 获取sku的所有值
const skuList = formData.getAll('sku');
// 获取quantity的所有值
const quantityList = formData.getAll('quantity');

console.log('sku:', skuList); // 输出：sku: ["saafasf", "hjhkk"]
console.log('quantity:', quantityList); // 输出：quantity: ["3", "3"]

可选：整理成键对应数组的对象 #

如果需要把所有键值对统一整理成对象形式，可以遍历FormData的键：

const resultObj = {};
for (const key of formData.keys()) {
  resultObj[key] = formData.getAll(key);
}

console.log(resultObj);
// 输出：
// {
//   sku: ["saafasf", "hjhkk"],
//   quantity: ["3", "3"]
// }

关键提示 #

• FormData.get(key)：仅返回该键的第一个匹配值
• FormData.getAll(key)：返回该键的所有值组成的数组
• 只要表单控件的name属性相同，FormData就会自动收集所有对应值，不需要手动逐个添加

内容的提问来源于stack exchange，提问作者zalala