当前位置: 代码迷 >> 综合 >> Thymeleaf 两种异步刷新部分htlm页面方法
  详细解决方案

Thymeleaf 两种异步刷新部分htlm页面方法

热度:60   发布时间:2023-12-24 03:42:16.0

经量使用id定位 

$(".header_gw").mouseenter(function () {$.get("cartListforAjax", function (data) {$("#cartListInner").html(data);});});

th:fragment

      在list.htlm页面中  使用 th:fragment  标签将需要动态刷新的部分包裹起来 

<div class="GM_banner_main" th:fragment="pageInfo"><a href="#" id="cur" th:text="${skuLsInfoAndDsl?.cur}">
</div>

 2.后端代码

  返回 "list : : pageInfo" 表示    将数据渲染到  list页面的   th:fragment  值为pageInfo的部分

@GetMapping("page")public String listPage(@RequestParam("cur") int cur, @RequestParam("dsl")String dsl, ModelMap modelMap) {PmSearchSkuInfosAndDsl pmSearchSkuInfosAndDsl = searchService.page(cur,dsl);modelMap.put("skuLsInfoAndDsl",pmSearchSkuInfosAndDsl);return "list::pageInfo";}

3.使用ajax请求时,直接将渲染好的 html 页面  $(".GM_banner_main").html(htmlText);  替换掉

     $.ajax({url:"page",type:"GET",data:{dsl:str,cur:cur-1,},success:function (htmlText) {$(".GM_banner_main").html(htmlText);}})

th:include="cartListInner"

   1.在 list.htlm 页面中  使用 th:include="cartListInner"  标签,里面不用   cartListInner表示需要渲染的页面名

???????<div th:include="cartListInner" id="cartListInner"></div>

  2. 在cartListInner.html 页面中 渲染数据

<ul><li  th:each="cartInfo:${cartList}"><img  th:src="${cartInfo.productPic}"/></li>
</ul>

3.后端代码

 return "cartListInner"  表示将数据渲染到 cartListInner.htlm这个页面   然后在 list.htlm又包括了 

   cartListInner.htlm所以最终数据 渲染到  list.html 页面

    @RequestMapping("checkCart")public String checkCart( String isChecked,String skuId,ModelMap modelMap){modelMap.put("cartList","");  放入一些数据return "cartListInner";}