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+='">'
thymehtml+=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属性。要去掉。
最后参考资料的地址：
- stackoverflow
-github