thymeleaf-js获取当前用户以及遍历ajax的json数组
2018-02-17 02:24
991 查看
项目用到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>注意事项:
参数中的userId是从spring-security中获取,这个principal是经过我扩展的,所以有ID属性。
异步获取json后,使用上述代码中的格式才行,并且我获取到的链接(以home举例,我希望生成的路径是:localhost:8080/project/home),前面若以/开头,最终生成的是从根路径开始的路径(如:localhost:8080/home),项目路径丢失(已测试);若不是以/开头,则最终生成的路径是从当前目录开始(未测试)(如:localhost:8080/project/test/home)。所以使用过程中这个要注意一下。
以下两种情况不管用,thymeleaf会解析不到,最终data是null或者根本不存在的东西,js会报错:
最后参考资料的地址:
Thymeleaf print JSON string as JSON object into a javascript variable - stackoverflow
[MAJOR FEAT] New syntax for textual template modes -github
先上完成后的代码:<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>注意事项:
参数中的userId是从spring-security中获取,这个principal是经过我扩展的,所以有ID属性。
异步获取json后,使用上述代码中的格式才行,并且我获取到的链接(以home举例,我希望生成的路径是:localhost:8080/project/home),前面若以/开头,最终生成的是从根路径开始的路径(如:localhost:8080/home),项目路径丢失(已测试);若不是以/开头,则最终生成的路径是从当前目录开始(未测试)(如:localhost:8080/project/test/home)。所以使用过程中这个要注意一下。
以下两种情况不管用,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实现cookie的操作以及创建js数组和遍历js数组,js对象,jquery.json的使用
- JS 遍历 JSON 数组及获取 JSON 数组长度
- ajax获取json数据为多维数组时,前台js嵌套循环解析
- ajax如何经过后台返回json数组以及在在js中得到json对象
- js遍历数组和对象,以及Json与String的转化
- js如何获取当前用户访问的ip地址以及城市地区?
- 针对不同数据库,获取当前用户所有有权限查看的表,以及表的创建时间、更新时间、注释等信息,表中字段的相关信息(包含分页实现)
- JS获取当前对象大小以及屏幕分辨率等
- js获取通过ajax返回的map型的JSONArray
- Thymeleaf将ajax返回值中拼接外部标签和 js中获取session值及 在普通标签中获取session值
- JS实现键值对遍历json数组功能示例
- js如何获取json数组的长度
- js获取通过ajax返回的map型的JSONArray的方法
- JS 通过用户IP 获取用户所在地址以及所使用浏览器和操作系统
- js获取通过ajax返回的map型的JSONArray的方法
- js 获取json数组里面数组的长度实例
- JS获取屏幕分辨率以及当前对象大小等
- json 数组的遍历,从流程参数配置页面生成js
- jquery ajax() 404错误,406错误解决方案 遍历json数组 append到指定位置 ajax实现点击加载更多按钮
- jQuery的ajax和遍历数组json实例代码