ajax请求后,使用thymeleaf渲染成功,页面不显示
这个bug我找了很久,之前是怀疑,thymeleaf解析错误,但是返回时,页面的元素存在,但是页面不显示。
1、ajax请求操作
$(document).ready(function(){
var leader_top = $("#leader_top");
$.ajax({
url: "/association/leaderResource",
type: "get",
success: function (data) {
},
error: function () {
alert("服务器错误,请联系管理员")
}
})
});
2、后台处理
@GetMapping("/association/leaderResource")
public String leaderResource(Model model){
List<Map<String,Object>> userList = leaderService.leaderResource();
model.addAttribute("userList",userList);
return "/page/leader";
}
3、页面解析
<div class="leader_introduce" th:each="u:${userList}">
<span>会长</span>:</span><span th:text="${u.name}"></span>
<img th:src="@{${u.get('img_path')}}" alt="" width="150px" height="150px"/>
<br><br><br><br>
<span>个人简介</span>
<hr>
<p th:text="${u.get('self_introduce')}"></p>
</div>
就这么几步做完,感觉没有什么问题,但是页面就是不显示,最后我怀疑是js加载机制和页面加载异步进行。
于是我在页面添加了一个测试超链接
<a href="/test">测试</a>
结果显示出来,我就确定是一个js和页面异步操作
4、解决方法
aja默认是异步刷新,这是ajax的特点,但是有的时候又是一个缺点。
那么在ajax中的async属性默认为true,即异步为true,将async改为false为同步操作,必须等ajax执行完之后才加载页面,问题解决
$.ajax({
url: "/association/leaderResource",
type: "get",
async: false,
success: function (data) {
},
error: function () {
alert("服务器错误,请联系管理员")
}
})