之前用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>