有一个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.html
return "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、del
var 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
是固定的,可以通过隐藏字段传递。
根据你的具体场景选择合适的方式即可。如果仍有问题,请提供更多上下文信息,我会进一步协助你!