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

根据你的具体场景选择合适的方式即可。如果仍有问题,请提供更多上下文信息,我会进一步协助你!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/34713.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

操作系统八股文整理(一)

操作系统八股文整理 一、进程和线程的区别二、进程与线程的切换过程一、进程切换进程切换的步骤&#xff1a; 二、线程切换线程切换的步骤&#xff1a; 三、进程切换与线程切换的对比四、上下文切换的优化 三、系统调用一、系统调用的触发二、从用户空间切换到内核空间三、执行…

卷积神经网络(CNN)之 EfficientNet

在深度学习领域&#xff0c;模型的计算效率与性能之间的平衡一直是一个核心挑战。随着卷积神经网络&#xff08;CNN&#xff09;在图像分类、目标检测等任务中取得显著成果&#xff0c;模型的复杂度和计算需求也急剧增加。2019年&#xff0c;Google Research 提出的 EfficientN…

leetcode0031 下一个排列-medium

1 题目&#xff1a; 下一个排列 官方标定难度&#xff1a;中等 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如&#xff0c;arr [1,2,3] &#xff0c;以下这些都可以视作 arr 的排列&#xff1a;[1,2,3]、[1,3,2]、[3,1,2]、[2,3,1] 。 整数数组的 下一…

Suno的对手Luno:AI音乐开发「上传参考音频 - 方式二:通过URL的方式」 —— 「Luno Api系列|AI音乐API」第12篇

导读 今天来看下Luno Api的上传参考音频 - 方式一&#xff1a;通过二进制流的方式。 参考文件&#xff0c;主要是用于在创作的过程中&#xff0c;希望AI参考这个音乐的曲风和声音来进行创作&#xff0c; 这一节看看如何直接使用url的方式进行实现。 申请和使用 「已经有API…

【开源+代码解读】Search-R1:基于强化学习的检索增强大语言模型框架3小时即可打造个人AI-search

大语言模型(LLMs)在处理复杂推理和实时信息检索时面临两大挑战:知识局限性(无法获取最新外部知识)和检索灵活性不足(传统方法依赖固定检索流程)。现有方法如检索增强生成(RAG)和工具调用(Tool-Use)存在以下问题: RAG:单轮检索导致上下文不足,无法适应多轮交互场景…

Blender-MCP服务源码2-依赖分析

Blender-MCP服务源码2-依赖分析 有个大佬做了一个Blender-MCP源码&#xff0c;第一次提交代码是【2025年3月7号】今天是【2025年月15日】也就是刚过去一周的时间&#xff0c;所以想从0开始学习这个代码&#xff0c;了解一下大佬们的开发思路 1-核心知识点 from mcp.server.fas…

【孟德尔随机化】Leave-one-out analysis的异常点,判断

下面Leave-one-out analysis的结果&#xff0c;第一条线代表去掉rs174564的结果&#xff0c;一些文献把这种情况判断为异常点/离群点&#xff0c;我们接下来看看其他结果 散点图的结果&#xff0c;最旁边的就是rs174564&#xff0c;这个SNP的点 在看下RadialMR的结果&#xff0…

【计算机网络】2物理层

物理层任务:实现相邻节点之间比特(或)的传输 1.通信基础 1.1.基本概念 1.1.1.信源,信宿,信道,数据,信号 数据通信系统主要划分为信源、信道、信宿三部分。 信源:产生和发送数据的源头。 信宿:接收数据的终点。 信道:信号的传输介质。 数据和信号都有模拟或数字…

kubernetes|云原生|部署单master的kubernetes 1.25.5版本集群完全记录(使用contained 运行时)

一、 部署目标&#xff1a; kubernetes版本1.19&#xff0c;1.23的前后差异还是比较巨大的&#xff0c;到1.25版本&#xff0c;为了追求高性能&#xff0c;自然还是需要使用containerd&#xff0c;本文将主要讲述在centos7虚拟机下部署kubernetes 1.25.5集群&#xff0c;使用…

DeepSeek+Dify本地部署私有化知识库

1.Windows安装docker Windows安装Docker-CSDN博客 2.安装olloma https://ollama.com/ 安装完成&#xff0c;可以在桌面右下角看到olloma图标 3.安装deepseekR1模型 ollama官网&#xff08;deepseek-r1&#xff09;&#xff0c;找到deepseek模型 选择合适大小的模型&#xff…

[Linux][经验总结]Ubuntu6.11.0 docker更换镜像源(实操可用的正确方法)

一、前言 关于Ubuntu更换docker镜像源&#xff0c;网上有很多的教程&#xff0c;但在实操中发现&#xff0c;更换的源无法生效——原因是我的docker是在系统安装时&#xff0c;选择附加安装的package的方式安装的。 现将处理过程记录如下。 二、获取镜像源 在网上随便找个几…

NHANES指标推荐:BRI!

文章题目&#xff1a;Association of body roundness index with cardiovascular disease in patients with cardiometabolic syndrome: a cross-sectional study based on NHANES 2009-2018 DOI&#xff1a;10.3389/fendo.2025.1524352 中文标题&#xff1a;心脏代谢综合征患者…

3.水中看月

前言 这篇文章讲解套接字分配IP地址和端口号。这部分内容也相对有些枯燥&#xff0c;但并不难&#xff0c;而 且是学习后续那些有趣内容必备的基础知识&#xff08;计算机网络基础&#xff09;。 一、分配给套接字的IP地址与端口号 IP是InternetProtocol&#xff08;网络协议…

Linux驱动开发-①pinctrl 和 gpio 子系统②并发和竞争③内核定时器

Linux驱动开发-①pinctrl 和 gpio 子系统②并发和竞争③内核定时器 一&#xff0c;pinctrl 和 gpio 子系统1.pinctrl子系统2.GPIO子系统 二&#xff0c;并发和竞争1.原子操作2.自旋锁3.信号量4.互斥体 三&#xff0c;按键实验四&#xff0c;内核定时器1.关于定时器的有关概念1.…

奇安信二面

《网安面试指南》https://mp.weixin.qq.com/s/RIVYDmxI9g_TgGrpbdDKtA?token1860256701&langzh_CN 5000篇网安资料库https://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247486065&idx2&snb30ade8200e842743339d428f414475e&chksmc0e4732df793fa3bf39…

Python库安装报错解决思路以及机器学习环境配置详细方案

文章目录 概要第三方库gdalpymoltalibmahotasgraphviznltk-datalazypredictscikit-surprisenb_extensionspyqt5-toolsspacy、en_core_web_sm 机器学习GPU-torch安装torch_geometric安装ubuntu安装显卡驱动dlib安装torch-cluster、torch-scatter、torch-sparse和torch-geometric…

Power Apps 技术分享:连接SharePoint列表数据源

前言 在使用Power Apps的时候&#xff0c;使用列表作为数据源是非常方便和经济的&#xff0c;列表创建简单&#xff0c;SharePoint的存储也不像Dataverse需要按照容量付费。 正文 1.我们先在SharePoint中建一个列表&#xff0c;添加一些测试数据&#xff0c;如下图&#xff1a;…

【Linux】learning notes(4)cat、more、less、head、tail、vi、vim

文章目录 catmore 查看整个文件less 查看整个文件head 查看部分文件tail 查看部分文件vim / vi cat cat 命令在 Linux 和 Unix 系统中非常常用&#xff0c;它用于连接文件并打印到标准输出设备&#xff08;通常是屏幕&#xff09;。虽然 cat 的基本用法很简单&#xff0c;但它…

C++11函数包装器

目录 std::function 注意事项 包装静态成员函数 包装非静态成员函数 std::bind 用法 应用场景 std::function function是C11引入的类&#xff0c;可以用任何可调用对象作为参数&#xff0c;构造出一个新对象。 可调用对象有函数指针&#xff0c;仿函数&#xff0c;lamb…

maven的安装配置

目录 一、官网下载压缩包 二、配置环境变量 设置 MAVEN_HOME 添加 MAVEN_HOME\bin 到 PATH 三、配置本机仓库和远程仓库 四、配置idea 一、官网下载压缩包 Download Apache Maven – Maven 如上图。选择这个压缩包 选择好文件&#xff0c;下载完后&#xff0c;配置环境变…