使用Thymeleaf简化后不需要异步加载

一开始项目,每个页面都是拆开的,所以页码功能单独放入一个页面,后台需要单独写一个返回页面的方法,使用异步加载的方式调用
后台访问方法

 @RequestMapping("doPageUI")
	 public String doPageUI() {
		 return "common/page";
	 }

页面加载方式
此时需要异步加载页码的页面

   $(document).ready(function(){
	    $("#pageId").load("doPageUI",function(){
		    doGetObjects();
	   });
	 });
<ul class="pagination pagination-sm no-margin pull-right">
    <li><a class="first">首页</a></li>
	<li><a class="pre">上一页</a></li>
	<li><a class="next">下一页</a></li>
	<li><a class="last">尾页</a></li>
	<li><a class="rowCount">总记录数(0)</a></li>
	<li><a class="pageCount">总页数(0)</a></li>
	<li><a class="pageCurrent">当前页(1)</a></li>
</ul>

使用Thymeleaf
定义和引用片段

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

  <body>
  
    <div th:fragment="copy">
      &copy; 2011 The Good Thymes Virtual Grocery
    </div>
  
  </body>
  
</html>
<body>

  ...

  <div th:insert="~{footer :: copy}"></div>
  
</body>

以上是官网代码
那么修改项目的步骤是
1.page页码公共代码修改,需要< div th:fragment=“page” xmlns:th=“http://www.w3.org/1999/xhtml”>包裹所有代码
2.在需要引入的地方引入,路径和名称是关键
3.在首页start引入,< html xmlns:th=“http://www.thymeleaf.org”>,官网说3.0以后可以不用。

<div id="pageId" class="box-footer clearfix" th:insert="/common/page :: page">

最终异步加载就可以去除,后台访问页码页面方法去除

发布了60 篇原创文章 · 获赞 5 · 访问量 1088
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览