ajax请求后，使用thymeleaf渲染成功，页面不显示

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("服务器错误，请联系管理员")
       }
   })

标签：function,leaderResource,ajax,thymeleaf,leader,association,页面
来源： https://blog.csdn.net/weixin_43290126/article/details/112062246