如何将Ajax获取的Map<String,String>数据转为JSP对象并渲染多选框？

核心说明 #

JSP的<c:forEach>是服务器端渲染标签，只能处理服务器转发到JSP的对象；而Ajax返回的是客户端异步获取的数据，需要用JavaScript动态生成DOM元素来渲染多选框，无法直接复用JSP标签逻辑。

步骤1：确保控制器返回JSON格式数据 #

修改后端控制器，将Map<String,String>转为JSON格式返回（以Spring MVC为例）：

@GetMapping("/allStateHO")
@ResponseBody
public Map<String, String> getStatesByRegion(@RequestParam("region") String region) {
    // 业务逻辑：根据传入的region查询对应州数据Map
    Map<String, String> stateMap = stateService.getStatesByRegion(region);
    return stateMap;
}

步骤2：修改Ajax请求与渲染逻辑 #

更新Ajax代码，指定dataType: "json"确保返回数据解析为JS对象，在success回调中动态生成州多选框：

function regionChange() {
    // 收集选中的地区标识（多选场景）
    let regionCheckBox = [];
    document.querySelectorAll('.reg:checked').forEach(el => {
        regionCheckBox.push(el.id); // 可根据实际需求替换为el.value
    });
    
    // 未选中地区时清空下级列表
    if (regionCheckBox.length === 0) {
        document.getElementById('statesUL').innerHTML = '';
        document.getElementById('city').innerHTML = '';
        return;
    }

    $.ajax({
        type: "get",
        url: "http://localhost:4005/allStateHO",
        cache: false,
        data: "region=" + regionCheckBox.join(','), // 多选地区用逗号分隔传递
        dataType: "json", // 指定返回JSON格式
        success: function(data) {
            // 清空原有州列表
            const statesUL = document.getElementById('statesUL');
            statesUL.innerHTML = '';
            
            // 遍历返回的键值对生成多选框
            for (const [stateCode, stateName] of Object.entries(data)) {
                const li = document.createElement('li');
                li.innerHTML = `
                    <label>
                        <input type="checkbox" class="reg" id="${stateCode}" value="${stateName}" />${stateName}
                    </label>
                `;
                statesUL.appendChild(li);
            }
            // 联动清空城市列表
            document.getElementById('city').innerHTML = '';
        },
        error: function() {
            alert('加载州数据失败');
        }
    });
}

步骤3：州联动城市的逻辑复用 #

stateChange()函数可复用上述逻辑：收集选中的州标识，发起Ajax请求获取对应城市数据，再用JavaScript动态生成城市多选框。

可选简化遍历方式（jQuery版本） #

如果使用jQuery，可替换遍历逻辑为：

$.each(data, function(stateCode, stateName) {
    const liHtml = `<li><label><input type="checkbox" class="reg" id="${stateCode}" value="${stateName}" />${stateName}</label></li>`;
    $('#statesUL').append(liHtml);
});

内容的提问来源于stack exchange，提问作者My India Info