SpringBoot前后端不分离，前端如何解析后端返回html所携带的参数

有一个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 是固定的，可以通过隐藏字段传递。