thymeleaf + SpringMVC局部刷新
之前用thymeleaf一直只是在页面加载的时候利用thymeleaf的标签取值，而ajax加载的数据则需要使用js添加到html中，今天因为其它框架而联想到thymeleaf中应该也可以局部动态刷新。于是百度并测试一番，现总结如下：
使用两种方式达到异步刷新：
1.load()函数异步刷新
load(url,//请求路径
reqData,//请求的数据
function(response，status){//回调函数
})如果只是简单的获取数据并加载只需要
$(selector).load(url);例如，在页面中需要动态加载一个列表：
html代码如下：
<div id="div1" th:fragment="div1">
<div th:if="${aa} ne null">
<ul th:each="a : ${aa}">
<li th:text="${a}"></li>
</ul>
</div>
</div>其中fragment可以理解为一个代码模板，thymeleaf可以根据这个进行定位。
js如下(注意需要引入jquery)：
<script>
$('#btn').click(function () {
var url = '/blog/ajaxTest';
$('#div1').load(url);
});
</script>前端这样就完成了，不需要在js中写动态生成ul的代码。接下来是后端代码。
@RequestMapping("/ajaxTest")
public String test(Model model){
System.out.println("ajaxTest");
List<String> list = new ArrayList<>(10);
for(int i=0;i<10;i++){
list.add("hello"+i);
}
model.addAttribute("aa",list);
return "test::div1";
}注意返回值是test::div1，test是视图名称（html文件名称）,div1是fragment的名称。这样就只是填充div1的数据，而不用刷新整个页面，达到动态刷新的目的。
当我们点击按钮时，10个li就添加到了html了。
这样做的好处是：不用在js里面写生成html的代码，使得js很简洁，并且不容易出错。
这样做的坏处是如果需要添加额外的css样式则不方便，并且动态生成的html是在服务器端完成的，无疑会增加服务器的负载（虽然影响非常小），也会增加返回的数据量，因为返回的是html而不仅仅是数据。
2.使用ajax异步刷新
ajax本来就是异步的，这里所说的异步是指异步刷新局部html，不单单只是异步请求数据。js代码如下，其他代码不变：
$('#btn').click(function () {
var url = '/blog/ajaxTest';
$.ajax({
url: url,
type: 'get',
data: {
a:'123'
},
success: function (data) {
$('#div1').html(data);
}
})
})在请求成功的回调函数success中向元素写入html，同样达到局部刷新的目的。
一般我们用load函数即可，至于有人说load函数会影响页面back和缓存，这个日后再验证吧。
另一个问题：
项目中的顶部导航栏在所有页面中都用到，所以需要单独抽离出来，减少代码冗余。
之前的做法是，在模板文件中写好导航条，在所有页面引入这个模板，然后在所有页面的后台向model中注入导航栏的值，但这样增加了代码量。
目前的解决方案：使用load(）进行局部加载，也就是在模板文件中用load函数先进行导航栏数据加载，将加载完的html引入其他页面。这样的好处是不用在每个RequestMapping的model中注入数据。不好的是会多了一次请求。