thymeleaf-js获取当前用户以及遍历ajax的json数组

thymeleaf和ajax的讲解以及代码应用 今天带给大家的是thymeleaf和ajax的基础应用。 阅读详情

项目用到thymeleaf3.0,有个需求是异步获取菜单并展示。发现thymeleaf对异步的json支持不太好(其实解析异步的json不符合thymeleaf的初衷)。这里算是踩了一个坑,在此记录下来。

先上完成后的代码:

<script type="text/javascript">
  		var data={
  				userId:[[${#authentication.principal.id}]]
  		}
  		var url = '[[@{/getMenu}]]';
  	function getMenu(){
  		$.get(url,data,function(data){
  			var html = '';
  			for(var i = 0;i<data.length;i++) {
  				html+='<li><a href="';
  				html+=[[@{data[i].path}]];
  				html+='">'
  				html+=data[i].name;
  				html+='</a></li>';
  			}
  			$("#menu").html(html);
  		});
  	}
  	getMenu();
  </script>

注意事项:

  1. 参数中的userId是从spring-security中获取,这个principal是经过我扩展的,所以有ID属性。
  2. 异步获取json后,使用上述代码中的格式才行,并且我获取到的链接(以home举例,我希望生成的路径是:localhost:8080/project/home),前面若以/开头,最终生成的是从根路径开始的路径(如:localhost:8080/home),项目路径丢失(已测试);若不是以/开头,则最终生成的路径是从当前目录开始(未测试)(如:localhost:8080/project/test/home)。所以使用过程中这个要注意一下。
  3. 以下两种情况不管用,thymeleaf会解析不到,最终data是null或者根本不存在的东西,js会报错:
<script type="text/javascript" th:inline="javascript">
	$.get(url,data,function(data){
		var html = '';
		for(var i = 0;i<data.length;i++) {
			html=[[@{data[i].path}]];
			html=[(@{data[i].path})];
		}
	});
<script>

关键还在于script标签中加的th:inline属性。要去掉。


最后参考资料的地址:

Thymeleaf print JSON string as JSON object into a javascript variable - stackoverflow

[MAJOR FEAT] New syntax for textual template modes -github



jQuery AJAX与Servlet通信的三大核心陷阱及解决方案 AJAX是Web前端与后端交互的基础技术,其本质是基于XMLHttpRequest的异步HTTP请求机制。理解请求路径解析、Content-Type协商、响应数据类型匹配这三大原理,是保障前后端可靠通信的技术前提。在Java Web传统栈中,jQuery作为轻量级AJAX封装工具,常与JSP和Servlet协同工作,但极易因上下文路径误配、字符编码不一致、JSON序列化/反序列化错位等问题导致404/500/乱码/解析失败等典型故障。本文聚焦于真实项目中最频发的路径构造、参数传递、响应解析三类问题,结合jQ 阅读详情

相关推荐

SpringBoot+MyBatis-Plus+Thymeleaf整合实战:社区网格化管理平台开发指南

在Java企业级应用开发中,SpringBoot作为快速构建微服务的核心框架,通过简化配置和依赖管理,极大地提升了开发效率。其核心原理是基于约定优于配置的思想,通过自动装配机制整合各类组件。结合MyBatis-Plus这一强大的ORM框架,开发者可以高效地进行数据库操作,减少重复的SQL编写工作。这种技术组合的价值在于能够快速搭建稳定、可维护的后台管理系统,尤其适用于需要精细数据管理和业务流程闭环的场景。社区网格化管理平台正是这一技术栈的典型应用,它通过将管理区域划分为网格,实现事件上报、处理和跟踪的完整流

weixin_30905133的博客 372

2小时候学会SpringBoot整合Thymeleaf生成静态页面

【课程介绍】      课程目标:             - 了解Thymeleaf的基本使用             - 实现商品详情页的渲染             - 知道页面静态化的作用             - 实现页面静态化功能      - 使用线程池实现静态页面生成 现在,我们的页面是通过Thymeleaf模板引擎渲染后返回到客户端。在后台需要大量的数据查询,而后渲染得到HTML页面。会对数据库造成压力,并且请求的响应时间过长,并发能力不高。大家能想到什么办法来解决这个问题?首先我们能想到的就是缓存技术,比如之前学习过的Redis。不过Redis适合数据规模比较小的情况。假如数据量比较大,例如我们的商品详情页。每个页面如果10kb,100万商品,就是10GB空间,对内存占用比较大。此时就给缓存系统带来极大压力,如果缓存崩溃,接下来倒霉的就是数据库了。所以缓存并不是万能的,某些场景需要其它技术来解决,比如静态化。

SpringBoot-34-开发实战(四)SSM+Thymeleaf+Bootstrap+iframe+jQuery+AJAX

jQuery前端JS库,简化DOM操作、AJAX调用。AJAX异步通信机制,局部刷新数据。

qq_20466211的博客 361

springboot+thymeleaf 封装自定义解析json字符串标签方法

一共四个方法,用于转换json或json数组,或者直接从json或json数组中取值。 二、接下来是表达式配置工厂类,以后添加别的方法也可以用,不用再写一个。 三、将表达式工厂添加到springboot配置 四、在页面中使用自定义的方法

ihchenchen的博客 2177

告别手动打点!用Cesium为你的大疆无人机快速生成区域巡查航线(保姆级教程)

本文详细介绍了如何利用Cesium平台为大疆无人机快速生成区域巡查航线的保姆级教程。通过自动化航线规划,告别传统手动打点的繁琐操作,实现高效、无死角的区域覆盖。文章涵盖环境搭建、实战案例及高级优化技巧,特别适合无人机操作员和巡检工作者提升工作效率。

weixin_30399821的博客 519

ArcGIS栅格数据像元值与坐标值提取及Excel导出全流程解析

本文详细解析了使用ArcGIS将栅格数据批量提取像元值与坐标值并导出至Excel的全流程。通过“栅格转点”、“添加XY坐标”和“表转Excel”三大核心步骤,无需编程即可自动化处理遥感、环境等领域的空间数据,有效提升数据分析效率。

zeta9的博客 365

SpringBoot学习笔记(四)Web开发

由于封装的JSON数据类型不确定,所以在定义统一的JSON结构时,我们需要用到泛型。/*** 若没有数据返回,默认状态码为0,提示信息为:操作成功!*/this.msg = "操作成功!/*** 若没有数据返回,可以人为指定状态码和提示信息*//*** 有数据返回时,状态码为0,默认提示信息为:操作成功!*/this.msg = "操作成功!/*** 有数据返回,状态码为0,人为指定提示信息*/return msg;

小鲁蛋的博客 1574

Palantir Vertex:数字孪生模拟与决策系统深度指南

Palantir Vertex是Foundry系统中的核心数字孪生模块,本质上是一个决策模拟器而非简单的数据可视化工具。它基于本体层构建,通过对象关系网络模拟现实世界实体,填补数据模型与业务决策间的鸿沟。核心功能包括:创建隔离的沙盒场景进行假设测试、修改参数模拟不同干预方案、对比虚实数据发现异常,并最终将最优决策回传至业务系统。典型应用场景涵盖供应链韧性评估、资产维护优化和应急方案制定等,帮助用户在复杂环境中做出更优决策。

轩哥的个人研究和成长记录 891

JSONArray遍历处理

json

qq_33240556的博客 9937

从仿真到实践:两级直接耦合放大电路的静态工作点协同调试指南

本文详细解析了两级直接耦合放大电路的静态工作点协同调试方法,从仿真到实践提供系统指南。重点介绍了Rc2电阻调整技巧、集电极电位测量方法及常见问题排查,帮助工程师解决各级静态工作点相互影响的难题,提升模拟电路设计效率。

weixin_29189373的博客 124

光谱数据预处理综合

除了化学信息,光谱还包含其他不相关或不需要的信息,如电噪声,基质背景,杂散光,散射效应等。在用化学计量学方法建立校准模型时,利用预处理方法消除光谱数据中的无关信息和噪声是非常必要的。

qq_44204759的博客 5189

thymeleaf模板怎么写ajax,Thymeleaf模版遍历JSON对象

背景Thymeleaf模版很多地方确实很方便,但是在处理JSON对象时遇到了一些问题,就觉得很有意思记录一下,以供自己备忘,同时给有类似需求的同学参考一下,希望大家都能尽快解决问题,早点下班,回家遛狗~在说正题之前,可能大家有个问题,其实Thymeleaf本身提供了一个map进行映射,还支持直接传class进行解析,那么为啥还要用JSON。其实我仔细想了一下,确实也没有一定要用JSON的必要,我就...

weixin_36261424的博客 914

14、X射线图像处理与特征提取全解析

本文全面解析了X射线图像处理与特征提取的关键技术,涵盖图像预处理、滤波、边缘检测、分割与恢复等流程,并深入探讨了几何特征(如面积、周长、圆度、椭圆拟合)、强度特征(均值、方差、对比度)、傅里叶描述符、不变矩(Hu矩、Gupta矩)以及局部描述符(SIFT、SURF)和稀疏表示方法。同时介绍了特征选择的过滤法、包装法和嵌入法,并结合Matlab代码示例展示了各类特征的实际提取过程。文章最后总结了当前技术的应用现状,并展望了深度学习在X射线图像分析中的未来潜力。

pz89012345的博客 133

js通过model从后端取值_Thymeleaf前后端传值 页面取值与js取值

目的:后端通过Model传值到前端页面通过Model取值显示js通过Model取值作为变量使用1.后台Controller@GetMapping("/message")public String getMessage(Model model){model.addAttribute("message","This is your message");return "index";}注:向model中...

weixin_39947306的博客 1567

把 ST03 的历史数据留得更久:ABAP Workload 统计保留期设置、原理与落地避坑指南

SAP ST03性能数据保留期配置指南 ST03/ST03N是SAP系统性能分析的核心工具,但默认数据保留期通常较短(3个月左右),难以满足跨季度对比、年度规划等需求。本文详细解析了ST03数据保留期的配置方法及注意事项: 数据存储机制:性能数据存储在监控库中,通过定期重组作业清理过期数据 配置路径:7.0+系统在"Workload Collector Database→Reorganization→Control"中按Profile分别设置 关键限制:保留期最大值建议不超过99,否则可

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 217

VS2019项目使用CGAL6.1配置教程详细步骤

在VS2019项目中使用CGAL详细步骤

插件开发 331

【笔记】Thymeleaf

将视图模板中的动态内容转换为对应的Java代码并执行,然后使用计算得到的具体数据替换原来的动态部分。前后端分离模式下,前端程序和后端程序使用JSON格式进行交互,所以项目启动时前端工程和后端工程师需要坐在一起开会,商量确定JSON格式的具体细节。在请求转发的场景下,我们可以借助HttpServletRequest对象内部给我们提供的存储空间,帮助我们携带数据,把数据发送给转发的目标资源。所以在JSP的使用背景下,我们可以说域对象有4个,现在使用Thymeleaf了,没有pageContext。

LawssssCat的博客 4307

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

Springboot+Thymeleaf提交复选表格数据给后台[toolbar]

泪目。。。 Thymeleaf官方文档都没查到“toolbar”这玩意。。 后台管理要做一个一键通过,一键驳回的按钮,逻辑很简单,给表格添加复选,选中全部或者多行提交给后台,然后修改数据即可。然鹅过程很曲折: 这个模板框架表格复选框是自带的,网页查看源代码能看到,但是再html页面却是隐藏的。。。因为是模板咯 找不到控制按钮,选中后就没法进行操作... 后来全局搜索在src\main\r...

进击的Coder菜鸟 7478

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

不需要懂js的简单Echarts入门案例(java语言,同时解决thymeleaf在js中不方便遍历数据)

先导入需要的jra包,来自于GitHub上的大神。 <!-- https://mvnrepository.com/artifact/com.github.abel533/EChartsjava封装 --> <dependency> <groupId>com.github.abel533</groupId>...

qq_40323503的博客 442

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

Thymeleaf的常见用法

1.th:inline=“javascript” th:inline="javascript"这是Thymeleaf中的内联写法,支持在javascript访问model中的数据,所以以后想写[[${xxx.xxx}]]这样写法的时候一定要记得在script中写上th:inline=“javascript” <script type="text/javascript" th:inline="javascript"> function focus(gid){ $.ajax( {

weixin_47734621的博客 1156

手把手教你用Thymeleaf + Spring Boot 3.x 搭建一个带导航栏的动态网站

本文详细介绍了如何使用Thymeleaf和Spring Boot 3.x构建一个动态网站,包括环境搭建、Thymeleaf核心机制解析、动态导航栏实现、数据交互技巧以及高级优化策略。通过实战指南,帮助开发者快速掌握现代Web开发技术,提升开发效率。

weixin_30819085的博客 380

表单发送json数据

大概思路是首先监测表单的提交事件,然后阻止事件默认行为,之后获取表单中所有元素,将这些元素value和name利用循环添加到一个对象结构体中,再利用JSON这个对象的stringty方法将js对象转换为json对象,最后设置请求头发送数据,监测返回内容写入页面。这里利用了一些后端的thymeleaf技术,可以将th:value语法当作值来当作value来对待,重点不在这上面。<body>姓名:<input type="text" name="name"><br>

m0_71774042的博客 1708

用ajax做下大框,jquery怎样实现ajax联动框(一)

前台页面$(document).ready(function(){$("#rwflSelect").linkSelect({nodata:"none",required:true,firstUrl:'${rc.contextPath}/repair/loadCategory',secondUrl:'${rc.contextPath}/repair/loadSubCategory',firstVal...

weixin_31959079的博客 199

springboot_2(thymeleaf、异常、log4j、mybatis、redis)

文章目录thymeleaf模板引擎简介使用thymeleaf模板语法链接传参springboot异常处理日志集成mybatis集成redis集成RedisTemplateStringRedisTemplate基于注解的使用 thymeleaf模板引擎 简介 作用:做同步开发使用,前端代码与后端代码在一个项目中。类似于jsp,用来获取后端java代码的数据(request,session,servletContext),在html中使用模板引擎技术来获取数据。 同步:用户发起请求url(http://

qq_43050847的博客 545

Web 前端快速复习二

文章目录前言1.JQuery1.1.概述1.2.快速入门1.3.选择器1.3.1.基本操作学习1.3.2.选择器分类1.4.DOM操作1.4.1.内容操作1.4.2.属性操作1.4.3.CRUD操作1.5.动画1.6.遍历1.61. **js 的遍历方式**1.62. **jq 的遍历方式**1.7.事件的绑定1.8.增强JQuery的功能1.9.杂项1.9.1.表单验证1.9.2.其它方法.da...

black210的博客 668

后端程序员需要了解的前端知识(持续更新中)

一、FastJson 1.对于JSON格式字符串、JSON对象及JavaBean之间的相互转换 JSON:fastJson的解析器,用于JSON格式字符串与JSON对象及javaBean之间的转换。 JSONObject:fastJson提供的json对象。 JSONArray:fastJson提供json数组对象。 参照:https://www.cnblogs.com/cdf-open...

striveb的博客 5690
上一篇: Spring Batch 测试以及问题记录
下一篇: 一、Apollo启动、添加多环境支持
levelnini
博客等级 码龄14年 45粉丝 37原创
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值