如何在JavaScript中访问Controller返回的ModelAndView内的变量？

当然可以在JavaScript里访问Model中的元素，而且有几种比隐藏输入框更简洁实用的方法，我给你整理几个常用的：

1. 直接在JS代码中嵌入EL表达式 #

因为JSP是服务器端渲染的，你可以直接把Model里的值通过EL表达式注入到JavaScript代码里，就像在JSP标签里用的那样：

// 获取单个数值类型的属性
const operatorRegionId = ${operator.regionId};

// 获取字符串类型的属性，记得加引号避免语法错误
const operatorName = "${operator.name}";

// 如果是复杂对象或数组，转成JSON格式直接用
const operator = ${@com.fasterxml.jackson.databind.ObjectMapper@writeValueAsString(operator)};
console.log(operator.regionId); // 直接访问对象属性

注意：如果是字符串类型，一定要包裹引号；复杂对象推荐用Jackson（Spring默认自带）转成JSON字符串，这样JS能直接当作对象使用。另外要注意XSS风险，框架的JSON转换一般会自动处理特殊字符，但手动拼接时要留意。

2. 用<c:set>标签中转后再在JS中引用 #

先通过JSP的<c:set>标签把Model的值存到页面作用域里，再在JS里取：

<%-- 把operator的regionId存到page作用域 --%>
<c:set var="operatorRegionId" value="${operator.regionId}" scope="page" />

// 从page作用域获取值
const regionId = ${pageScope.operatorRegionId};

这种方式适合需要统一管理页面变量的场景，逻辑更清晰。

3. 通过HTML的data属性传递数据 #

把Model的值绑定到某个DOM元素的data-*属性上，然后在JS里读取这些属性，比隐藏输入框更优雅：

<%-- 把数据绑定到一个容器元素上 --%>
<div id="operator-container"
     data-region-id="${operator.regionId}"
     data-operator='${@com.fasterxml.jackson.databind.ObjectMapper@writeValueAsString(operator)}'>
</div>

// 获取DOM元素
const container = document.getElementById('operator-container');

// 读取单个data属性
const regionId = container.dataset.regionId;

// 读取复杂对象，需要解析JSON
const operator = JSON.parse(container.dataset.operator);
console.log(operator.name);

这种方式的优势是把数据和UI元素关联起来，适合需要和页面交互绑定的数据。

这些方法都是利用JSP服务器端渲染的特性，直接把Model中的值注入到前端代码里，比隐藏输入框更简洁灵活，你可以根据自己的场景选择最合适的方式~

内容的提问来源于stack exchange，提问作者Jalil.Jarjanazy