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

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">  <!--重点是这个 th:fragment="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">
                <!--                th:href="@{/editgroup/}+${item.id}+'/'+${item.group_status}"-->
                <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>

 

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