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

本文链接：https://blog.csdn.net/qq_44801336/article/details/105086893

本文介绍如何使用Thymeleaf来简化页码功能，避免后台异步加载。通过定义和引用片段，将页码公共代码修改并封装，然后在需要的地方引入，以此消除对后台单独返回页面方法的需求，实现页面的高效加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

 @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">

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