Thymeleaf3 网页局部刷新 数据刷新

原博文：https://blog.csdn.net/aawmx123/article/details/87862304?utm_medium=distribute.pc_relevant_download.none-task-blog-baidujs-1.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-baidujs-1.nonecase

方法：

​ 使用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>