有一个SpringBoot实现的前后端不分离项目,当前端跳转某个界面时,比如下面的菜单树按钮,后端在返回页面menuTree.html时,还携带了一个参数角色roleId,以便打开菜单树,还要根据这个角色查询对应的分配授权的菜单树
后端返回menuTree.html
@GetMapping("/menu/menuTree")public String getMenuTree(Model model, @RequestParam(value = "roleId") Long roleId) {model.addAttribute("roleId",roleId);// 对应/WEB-INF/view/menuTree.htmlreturn "menuTree";}
前端menuTree.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>菜单</title><link rel="stylesheet" type="text/css" href="/sbSecDemo/static/layui-v2.9.24/layui/css/layui.css" media="all"><style>
.layuimini-container {border: 1px solid #f2f2f2;border-radius: 5px;background-color: #ffffff
}.layuimini-main {margin: 10px 10px 10px 10px;
}
</style>
</head><body><script type="text/javascript" src="/sbSecDemo/static/layui-v2.9.24/layui/layui.js"></script><div class="layuimini-container"><div class="layuimini-main" STYLE="margin: 20px"><div id="roleTree"></div></div>
</div><script>layui.use(['tree', 'util'], function () {var tree = layui.tree;var layer = layui.layer;var util = layui.util;const roleId = ${roleId};// 加载菜单树$.get('/sbSecDemo/menu/menuTreeList?roleId=' + ${roleId}, function (res) {tree.render({elem: '#roleTree',data: res.data,showCheckbox: true, // 是否显示复选框onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩id: 'roleTreeId',isJump: true, // 是否允许点击节点时弹出新窗口跳转edit: ['add', 'update', 'del'], // 开启节点的右侧操作图标operate: function (obj) {var type = obj.type; // 操作类型:add、update、delvar data = obj.data;}, // 当前节点数据oncheck: function (obj) {console.log(obj.data); // 获取选中节点var data = obj.data; //获取当前点击的节点数据layer.msg('状态:' + obj.state + '<br>节点数据:' + JSON.stringify(data));}});});});
</script>
</body>
</html>
上述 const roleId = ${roleId};
// 加载菜单树
$.get('/sbSecDemo/menu/menuTreeList?roleId=' + ${roleId}, function (res) {}
是拿不到roleId值的,会解析成http://localhost:8081/sbSecDemo/menu/menuTreeList?roleId=${roleId}
改成下面就可以
const roleId = [[${roleId}]]; // Thymeleaf 渲染// 加载菜单树$.get('/sbSecDemo/menu/menuTreeList?roleId=' + roleId, function (res) {}
效果如下
原因分析
代码中 "${roleId}"
没有被正确解析,是因为 "${roleId}"
是模板引擎(如 Thymeleaf 或 JSP)的语法,而你在 JavaScript 中直接使用它时,浏览器会将其视为普通字符串,而不是动态值。
要解决这个问题,你需要确保 roleId
的值能够正确传递到 JavaScript 中。以下是几种解决方案:
1. 通过后端渲染将 roleId
嵌入到 JavaScript 中
如果你使用的是模板引擎(如 Thymeleaf 或 JSP),可以将 roleId
直接渲染到 JavaScript 中。
Thymeleaf 示例:
<script>layui.use(function() {const roleId = [[${roleId}]]; // Thymeleaf 渲染$.get('/sbSecDemo/menu/menuTreeList?roleId=' + roleId, function(res) {console.log(res);});});
</script>
JSP 示例:
<script>layui.use(function() {const roleId = "${roleId}"; // JSP 渲染$.get('/sbSecDemo/menu/menuTreeList?roleId=' + roleId, function(res) {console.log(res);});});
</script>
2. 通过隐藏字段传递 roleId
你可以在 HTML 中定义一个隐藏字段,将 roleId
存储在其中,然后在 JavaScript 中读取该字段的值。
HTML:
<input type="hidden" id="roleId" value="${roleId}"><script>layui.use(function() {const roleId = document.getElementById('roleId').value;$.get('/sbSecDemo/menu/menuTreeList?roleId=' + roleId, function(res) {console.log(res);});});
</script>
3. 通过 URL 参数解析 roleId
如果 roleId
是通过 URL 参数传递的(例如 http://localhost:8081/menuTree?roleId=123
),可以使用 JavaScript 解析 URL 参数。
JavaScript:
<script>layui.use(function() {// 解析 URL 参数function getQueryParam(name) {const query = window.location.search.substring(1);const params = query.split('&');for (const param of params) {const [key, value] = param.split('=');if (key === name) {return decodeURIComponent(value);}}return null;}const roleId = getQueryParam('roleId');if (roleId) {$.get('/sbSecDemo/menu/menuTreeList?roleId=' + roleId, function(res) {console.log(res);});} else {console.error('Role ID not found in URL');}});
</script>
4. 使用 AJAX 请求获取 roleId
如果 roleId
需要通过 AJAX 请求从后端获取,可以单独发送一个请求来获取 roleId
,然后再发送第二个请求。
JavaScript:
<script>layui.use(function() {// 先获取 roleId$.get('/sbSecDemo/getRoleId', function(roleId) {// 再发送请求$.get('/sbSecDemo/menu/menuTreeList?roleId=' + roleId, function(res) {console.log(res);});});});
</script>
总结
-
如果
roleId
是通过后端渲染的,确保使用模板引擎语法(如 Thymeleaf 的[[${roleId}]]
或 JSP 的${roleId}
)。 -
如果
roleId
是通过 URL 参数传递的,可以使用 JavaScript 解析 URL。 -
如果
roleId
需要通过 AJAX 获取,可以分两步发送请求。 -
如果
roleId
是固定的,可以通过隐藏字段传递。
根据你的具体场景选择合适的方式即可。如果仍有问题,请提供更多上下文信息,我会进一步协助你!