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.html         return “menuTree”;     } 前端menuTree.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 示例：

JSP 示例：

2 通过隐藏字段传递roleId

你可以在 HTML 中定义一个隐藏字段，将 roleId 存储在其中，然后在 JavaScript 中读取该字段的值。

HTML：

3 通过 URL 参数解析roleId

如果 roleId 是通过 URL 参数传递的（例如 http://localhost:8081/menuTree?roleId=123），可以使用 JavaScript 解析 URL 参数。

JavaScript：

4 使用 AJAX 请求获取roleId

如果 roleId 需要通过 AJAX 请求从后端获取，可以单独发送一个请求来获取 roleId，然后再发送第二个请求。

JavaScript：

总结

• 如果 roleId 是通过后端渲染的，确保使用模板引擎语法（如 Thymeleaf 的 [[${roleId}]] 或 JSP 的 ${roleId}）。
• 如果 roleId 是通过 URL 参数传递的，可以使用 JavaScript 解析 URL。
• 如果 roleId 需要通过 AJAX 获取，可以分两步发送请求。
• 如果 roleId 是固定的，可以通过隐藏字段传递。 根据你的具体场景选择合适的方式即可。如果仍有问题，请提供更多上下文信息，我会进一步协助你！