如何向服务器POST数组？解决客户端数组传参变字符串问题

当你直接把数组selecedAddresses赋值给hidden输入框的value时，JavaScript会自动调用数组的toString()方法，将数组元素用逗号拼接成单个字符串。但你的地址本身包含逗号（比如Kileleshwa, Nairobi, Kenya），这就导致服务器端收到的字符串无法通过简单拆分还原成原数组。

方案1：JSON序列化+反序列化 #

客户端修改 #

将数组转为JSON字符串后再赋值给输入框：

document.getElementById('locationArray').value = JSON.stringify(selecedAddresses);

服务器端修改 #

解析JSON字符串还原数组（注意修正路由路径与表单action一致）：

app.route('/advertiser')
   .post((req, res)=>{ 
       let locationArray = JSON.parse(req.body.locationArray);   
       console.log("locationArray: ", locationArray);
   })

说明：JSON序列化后会生成标准格式的字符串（如["Kileleshwa, Nairobi, Kenya", ...]），服务器端用JSON.parse可精准还原原数组，不受地址内逗号影响。

方案2：多同名输入框提交数组 #

HTML表单修改 #

移除单个hidden输入框，新增容器用于动态生成输入：

<form action="/advertiser" method="POST" enctype="multipart/form-data">
    <div class="mb-3" id="locationContainer"></div>
    <button type="submit" class="btn btn-secondary"> Add location </button> 
</form>

客户端修改 #

遍历数组生成多个同名hidden输入框：

const container = document.getElementById('locationContainer');
selecedAddresses.forEach(address => {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'locationArray[]'; // 带[]标识让服务器识别为数组
    input.value = address;
    container.appendChild(input);
});

服务器端修改 #

直接读取解析后的数组：

app.route('/advertiser')
   .post((req, res)=>{ 
       let locationArray = req.body.locationArray;   
       console.log("locationArray: ", locationArray);
   })

说明：服务器端的表单解析中间件（如Express的body-parser/multer）会自动将同名locationArray[]字段组装成数组，无需额外处理。

• 表单action为/advertiser，但原服务器路由写的是/Geolocations，必须将两者统一才能匹配请求。
• 若使用multipart/form-data编码，需确保服务器端配置了对应的解析中间件（如multer），否则无法读取req.body数据。

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