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

项目用到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



  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值