如何通过JavaScript向Servlet正确传递两个数组参数

你代码里有3个直接导致传参失败的错误：

• 宠物下拉框的name属性错写成和蔬菜下拉框一致的vegetables-selected，没有独立标识
• JS遍历逻辑语法错误：把两个下拉框的options遍历写进了同一个for循环声明里，属于非法语法，根本不会执行宠物下拉框的选项遍历，存宠物值的数组从头到尾都是空的
• 最终跳转拼接URL的时候，只传了存蔬菜值的selected参数，根本没有把宠物数组的参数拼到请求地址里，后端自然拿到null

另外还有两个小笔误：第一个蔬菜选择框的labelfor属性指向了pets，和自身idvege不匹配；宠物选项里的car明显是cat的笔误。

1. 修正HTML结构 #

把两个下拉框的name、label关联关系改对：

<label for="vege">Choose your Vegetables:</label>
<select class="selectpicker" name="vegetables-selected" id="vege" multiple aria-label="size 3 select example">
    <option value="Carrot">Carrot</option>
    <option value="Broccoli">Broccoli</option>
    <option value="Cabbage">Cabbage</option>
    <option value="Cucumber">Cucumber</option>
    <option value="Mushroom">Mushroom</option>
</select>

<label for="pets">Choose your pets:</label>
<select class="selectpicker" name="pets-selected" id="pets" multiple aria-label="size 3 select example">
    <option value="dog">dog</option>
    <option value="cat">cat</option>
    <option value="snake">snake</option>
</select>
<button id="submit">提交</button>

2. 修正JS收集与传参逻辑 #

分开遍历两个下拉框收集选中值，用标准URL参数拼接方式传多值参数，避免特殊字符转义问题：

document.getElementById('submit').onclick = function() {
    // 收集已选蔬菜
    const selectedVege = [];
    for (const option of document.getElementById('vege').options) {
        if (option.selected) selectedVege.push(option.value);
    }
    // 收集已选宠物
    const selectedPets = [];
    for (const option of document.getElementById('pets').options) {
        if (option.selected) selectedPets.push(option.value);
    }
    // 拼接多值参数，适配Servlet的数组接收逻辑
    const params = new URLSearchParams();
    selectedVege.forEach(val => params.append("vegetables", val));
    selectedPets.forEach(val => params.append("pets", val));
    // 发起跳转请求
    location.href = `output?${params.toString()}`;
}

3. Servlet端接收代码 #

不要用单值接收的getParameter方法，用专门接多值参数的getParameterValues直接拿数组：

// 接收蔬菜数组
String[] selectedVegetables = request.getParameterValues("vegetables");
// 接收宠物数组
String[] selectedPets = request.getParameterValues("pets");

提示：如果选了包含特殊字符的选项值，用URLSearchParams会自动做转义，不会出现参数截断、乱码问题，比手动拼接字符串可靠。

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