SSM+jquery封装的ajax实现前后台分页的异步刷新

目录

1.什么是分页
2.需求
3.思路分析，变量介绍
4.逻辑操作步骤
5.具体实例，代码分析
6.总结

什么是分页？

分页，顾名思义就是将所有数据按页码分组分别显示在属于自己的当前页内，当数据很多的时候，只在一页里看比较杂乱，所以用到分页，使显示更清晰有条理。场景如下图（不是很美观，主要看功能）：

需求：

1、点击全部分类，将全部分类里的图书分页
2、点击全部分类下面的其它类型，将其他类型中显示的图书分页
3、点击1，2，3，4，5等等页码显示每页中的数据
4、点击哪个页码，哪个页码变成红色
5、点击上一页，跳到上一页展示的界面，点击下一页跳到下一页显示的界面
6、实现图书信息与页码的局部刷新

思路分析,变量介绍：

前台需要展示的是一页一页的数据，每一页包含的信息有两个：当前页码(currentPage)、每一页显示的数据的条数(pageSize)。其他的事情前台不用关心，它的目的只是展示数据。而数据的来源在后台，前台告诉后台需要哪一页的数据以及这一页有多少条数据，pageSize是可以设定的，所以currentPage是前台和后台交互的核心。那么后台接收到前台的currentPage，要去识别它，根据这个参数到数据库取得数据返回给前台。

当点击全部分类时根据前端传过来的当前页，去数据库中获取每页显示的数据，再利用count(*)获取书总行数来计算总页数，再将book，bookList，page 传递到前端，特别注意：传递book主要是用book中cid的属性，这里的book类中的cid属性为空，虽说我们没有用到，但是要给设个值book.setCid="0",因为要做为book.jsp显示图书界面的a链接中的点击事件的方法里的参数传递，为空会报错，为什么要作为参数呢？因为不论是全部分类，还是下面的三个分类，都共用一个界面book.jsp中的页码的<div>,所以当点击a链接触发点击事件，将数据传递到ajax内，ajax参数返回到控制器的ajax.do方法内，如果是下面的三个分类触发点击事件进来的，此时就需要cid的值去查询cid为1,2,3的图书信息，而如果是全部分类触发点击进来的，就不需要通过cid查图书，就默认设置cid为0作为参数，这样就不会报错了。
当点击全部分类的下面三个类型，在一张表category中，表中的cid属性与book表中的cid属性外键连接，所以当点击下面的链接时要根据传过来的cid与当前页去数据中查询图书的信息,再传递到前端界面，这里注意要将book，bookList，page 一起传递到前端，此时点击三个分类的哪个a链接，再触发点击事件，ajax都将对应的cid传回到控制层的ajax.do方法内，然后根据cid去数据库中查出对应的所有图书信息与总行数放到BookPage包装类里，通过@Response注解一起再返回return到ajax的success里进行拼接，完成异步刷新。
因为不论是全部分类触发点击事件，还是下面属于同一张表的三个分类触发的点击事件都会进入到同一个控制器的ajax.do方法内，此时就要在进入之前拼一个参数，判断一下，当这个参数为0，证明为全部分类触发，调用mapper.xml文件中查询所有书的那个方法，当这个参数为1，证明为全部分类下面的三个分类触发，调用mapper.xml文件中根据cid查询所有书那个方法。0与1在left.jsp中a链接后面作为路由参数传递到控制器。
属性介绍：
①、Page类中的属性解析：
1、先说说currentPage，currentPage的值怎么设置？当然是后台告诉前台一共有多少页(totalPage)，然后前台要展示的数据就在0~totalPage页之间，当前的处于哪一页就是currentPage的值；
2、rows(数据库中记录总数)，从数据库中查出的记录总数，通过sql指令中的count(*)查询。
3、totalPage(总页数)，计算公式为：当从数据库中的查出的记录总数(rows)为偶数时， totalPage(页数) = 数据库中该表的记录总数(rows)/pageSize(每一页记录数) ；当从数据库中的查出的记录总数(rows)为奇数时， totalPage(页数) = 数据库中该表的记录总数(rows)/pageSize(每一页记录数) +1；
4、pageSize，每一页记录数，这很好理解，每一页要展示多少数据，自己字自定义类中设定。
5、begin(每页的数据的起始下标),起始下标begin计算公式：begin = (currentPage-1)*pageSize。这个变量是为了给数据库中执行分页的sql语句limit使用，limit使用规则就是 limt begin,pageSize;
6、 id，用来判断是哪个分类触发的点击事件进入的ajax.do方法内，再对数据库进行对应操作(接收left.js传过来的定义的固定值，0与1，0为全部分类，1为下面的三个分类)

②、BookPage