thymeleaf局部刷新

之前用thymeleaf一直只是在页面加载的时候利用thymeleaf的标签取值，而ajax加载的数据则需要使用js添加到html中，那我们如果需要动态得局部刷新数据，该如何操作呢？

方法：使用th:fragment fragment可以理解为一个代码模板，thymeleaf可以根据这个进行定位。

html代码

<div class="article_type" th:fragment="article_type">文章分类:<div th:each="articletype : ${articleTypes}">                      <label class="checkbox-inline"><input type="checkbox" th:text="${articletype.text}" id="inlineCheckbox1" value="option1"> </label></div></div>

ajax请求

    $('#btn').click(function () {var url = '/blog/test';$.ajax({url: url,type: 'POST',success: function (data) {$(".article_type").html(data);}})})

后台请求

@RequestMapping(value="/test",method=RequestMethod.POST)
public String aaa(Model model) {List<ArticleType> articleTypes = articleTypeService.selectLeafArticleTypes();ArticleType a = new ArticleType();model.addAttribute("articleTypes",articleTypes);return "write_article::article_type";
}

注意返回值是write_article::article_type，write_article是视图名称（html文件名称）,article_type是fragment的名称。这样就只是填充article_type的数据，而不用刷新整个页面，达到动态刷新的目的。

也可以使用load函数进行局部刷新

<script>$('#btn').click(function () {var url = '/blog/test';$('.article_type').load(url);});
</script>