thymeleaf局部刷新

比眉伴天荒 2022-11-26 09:44 206阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关 thymeleaf局部刷新数据

效果是这样的 ![在这里插入图片描述][20210112150131972.png] 点击按钮展示数据 ![在这里插入图片描述][2021011215014931

向右看齐/ 2023年01月05日 12:26/ 0 赞/ 320 阅读

相关 thymeleaf局部刷新

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

比眉伴天荒/ 2022年11月26日 09:44/ 0 赞/ 207 阅读

相关 thymeleaf局部刷新数据

效果是这样的 ![在这里插入图片描述][20210112150131972.png] 点击按钮展示数据 ![在这里插入图片描述][2021011215014931

以你之姓@/ 2022年11月19日 12:54/ 0 赞/ 175 阅读

相关 Minigui局部刷新 InvalidateRect

整体刷新 InvalidateRect (hWnd, NULL, TRUE); 局部刷新 //局部刷新菜单按钮区域结构体 static

不念不忘少年蓝@/ 2022年09月10日 15:09/ 0 赞/ 188 阅读

相关 ajax 局部刷新

1、jsp网页文件代码 <%@ page language="java" contentType="text/html; charset=utf-8" pageEnc

骑猪看日落/ 2022年06月11日 05:55/ 0 赞/ 285 阅读

相关 jquery局部刷新

1.局部div的刷新 $(".dl").load(location.href+" .dl"); 2.全页面的刷新方法 window.location.reload()

傷城~/ 2022年05月22日 13:05/ 0 赞/ 254 阅读

相关 ajax局部刷新流程

ajax的实现步骤 (1) 通过事件调用js中的函数，通过函数创建ajax请求,也就是创建一个异步调用对象. (2) ajax里通过url键指定的值创建一个新的url执

秒速五厘米/ 2022年02月13日 04:49/ 0 赞/ 306 阅读

相关 RecyclerView局部刷新数据

RecyclerView局部刷新数据使用adapter.notifyDatasetChanged()刷新导致全部数据都刷新了，如果数据量大的话，使用此方法不但增加了手机

Dear 丶/ 2022年01月17日 05:27/ 0 赞/ 355 阅读

相关 springboot使用thymeleaf模板引擎实现局部刷新数据功能

1.介绍 springboot和thymeleaf 就不用说了，都懂，完事呢局部刷新用ajax；前端用ajax局部刷新数据一般有这么几个办法：使

超、凢脫俗/ 2021年11月13日 23:34/ 1 赞/ 1045 阅读

相关页面局部刷新

场景：页面A使用第三方插件C，如果页面刷新，C会重新初始化并且无法记录之前的信息。现在希望页面的主要功能区B刷新，但是C的信息不要丢失。解决方案：B采用iframe方式...

红太狼/ 2020年06月23日 17:35/ 0 赞/ 1073 阅读