当前位置：首页 > article >正文

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

article 2025/3/20 20:57:59

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