如何在JSP页面通过JavaScript访问Spring MVC返回的HashMap

Hey there, let's break down why your current code isn't working and fix it properly!

首先，修正控制器里的语法错误 #

你写的Map<"String", "String">是不合法的Java语法，泛型参数应该是类型而非字符串字面量，要改成Map<String, String>：

@ModelAttribute("regPrefix")
public Map<String, String> getRegPrefixesOfDepartmentforGroup(final Model model, final HttpServletRequest request) {
    final Map<String, String> regPrefixOfDept = new HashMap<>();
    regPrefixOfDept.put(regKey, regPrefix); // 确保regKey和regPrefix是已定义的有效变量
    return regPrefixOfDept;
}

为什么你的JS代码无法运行？ #

当你在JS里写var mapObj = "${regPrefix}";时，JSP会把${regPrefix}解析成Java Map的toString()结果——也就是类似{key1=value1, key2=value2}的字符串，这不是合法的JSON/JS对象格式，所以JS没法把它当成对象来遍历。

两种可行的解决方案 #

方案1：用Jackson把Map转成JSON字符串（推荐，更安全）

这种方法会自动处理特殊字符（比如引号、换行），避免JS语法错误。

首先确保项目里有Jackson依赖（Spring Boot默认已包含），然后在控制器里新增一个返回JSON字符串的模型属性：

import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.core.JsonProcessingException;

@ModelAttribute("regPrefixJson")
public String getRegPrefixesJson() throws JsonProcessingException {
    Map<String, String> regPrefixOfDept = new HashMap<>();
    regPrefixOfDept.put(regKey, regPrefix);
    ObjectMapper mapper = new ObjectMapper();
    return mapper.writeValueAsString(regPrefixOfDept);
}

然后在JSP的JS里直接解析这个JSON字符串：

$("#deptIdSelection").change(function() {
    var obj = document.getElementById("deptIdSelection");
    var textItem = obj.options[obj.selectedIndex].text;
    alert(textItem);
    
    // 把JSON字符串转成JS对象
    var mapObj = JSON.parse('${regPrefixJson}');
    
    // 遍历对象，加上hasOwnProperty避免遍历原型链属性
    for(var key in mapObj) {
        if(mapObj.hasOwnProperty(key)) {
            alert(key +" ->"+ mapObj[key]);
        }
    }
});

方案2：用JSTL循环构建JS对象（无需额外依赖）

如果不想引入Jackson，可以用JSTL的<c:forEach>标签手动构建JS对象，但要注意处理特殊字符：

首先确保JSP顶部引入了JSTL核心标签：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

然后在JS里构建对象：

$("#deptIdSelection").change(function() {
    var obj = document.getElementById("deptIdSelection");
    var textItem = obj.options[obj.selectedIndex].text;
    alert(textItem);
    
    // 用JSTL循环生成键值对
    var mapObj = {
        <c:forEach var="entry" items="${regPrefix}" varStatus="status">
            // 转义引号避免JS语法错误
            "${fn:replace(entry.key, '"', '\\"')}": "${fn:replace(entry.value, '"', '\\"')}"
            <c:if test="${!status.last}">,</c:if>
        </c:forEach>
    };
    
    for(var key in mapObj) {
        if(mapObj.hasOwnProperty(key)) {
            alert(key +" ->"+ mapObj[key]);
        }
    }
});

最后提醒 #

如果你的regKey或regPrefix包含特殊字符（比如双引号、反斜杠），方案1的Jackson会自动处理，而方案2需要手动转义所有可能的特殊字符，所以优先推荐方案1。

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