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

超、凢脫俗 2021-11-13 23:34 1013阅读 1赞

### 1.介绍     ###

**springboot和thymeleaf   就不用说了，都懂，完事呢   局部刷新  用ajax；**

**前端用ajax局部刷新数据一般有这么几个办法：使用layui 或者  bootstrap等ui框架  那么就很简单实现，或者使用ajax请求后用jquery重新拼接一下完事渲染 前端实现局部数据刷新  或者你用mvvm类型的前端框架也可以    （jquery天下第一）**

** 完事我说一下 就单纯用thymeleaf加jquery   不用拼接代码实现的局部刷新  **

## 直接贴代码 ##

**后端**

/**
         * 查询
         *
         * @return
         */
        @GetMapping("/mp22")
        public String ToBootmp22(String name, Model model) {
            String sql = "select id,act_chk_status,act_name,act_busi_id from mp_activity_info_copy1 \n" +
                    "where true and (act_chk_status=50 or  act_chk_status=60)  and stop=0 and finish_status=0 ";
            if (!StringUtils.isEmpty(name)) {
                sql += " and act_name like '%" + name + "%'";
                sql += " or act_busi_id ='"+ name + "' ";
            }
            List<Map<String, Object>> list = jdbcTemplate.queryForList(sql);
            model.addAttribute("group", list);
            //重点是这个   ::div1
            return "page/mp2::div1";
        }

**前端**

<div class="mui-content">
        <div class=" mui-search" style="overflow: hidden">
            <input type="search" class="mui-input-clear" placeholder="请输入场景名称或场景id" name="mpScenes"
                   id="groupname" style="float: left;width: 80%">
            <a onclick="findmp()">
                <button style="float: right;background-color: #1989fa;width: 19%">查询</button>
            </a>
        </div>
    
        <div class="tips" >当前推送场景如下</div>
        <div class="list" th:fragment="div1" id="div1">   
            <div class="item-list top ub">
                <div class="item-name">场景名称</div>
                <div class="item-state">  场景状态</div>
                <div class="item-operate ub-f1">操作</div>
            </div>
    
            <div class="item-list ub item-operate ub-f1" th:each="item:${group}">
                <div class="item-name ut-s" th:text="${item.act_name}" style="width: 145px"></div>
                <div class="item-state">
                    <div class="btn btn-start"  style="width: 50px" th:if="${item.act_chk_status}==50">运行中</div>
                    <div  class="btn btn-stop"  style="width: 50px" th:if="${item.act_chk_status}==60">未运行</div>
                </div>
                <div class="item-operate ub-f1">
                    
                    <a th:onclick="'javascript:return OffOrNo('+${item.act_chk_status}+','+${item.id}+')'">
                        <div class="btn btn-stop" th:if="${item.act_chk_status}==50">
                            暂停
                        </div>
                        <div class="btn btn-start" th:if="${item.act_chk_status}==60">启动</div>
                    </a>
                </div>
            </div>
    
        </div>
    </div>
    
    <script>
        /**
         * 查询用户组
         */
        function findmp() {
            var url = "/mp22?name=" + $('#groupname').val();
            $('#div1').load(url);
        }
    </script>

**就这样，很简单   有啥问题下方留言**