目录
1.使用ajax技术（无刷新）实现分页的好处
2.准备工作
2.1.需要引入的包和库
2.2.包的建立和数据库表建立
2.3.方法
3.案例演示

1.使用 ajax 技术（无刷新）实现分页的好处

改善 web 应用的用户体验,避免用户在页面上不停的提交和刷新，而大多数的刷新是没有必要的。

2.准备工作

• 2.1.需要引入的库和包

jQuery 库，放在 js 文件夹内

文章图片


jar 包，放在 lib 文件夹内
1.使用 jstl 和 EL 表达式的包

文章图片

文章图片

2.连接数据库的包

文章图片


3.使用 json 语法的包

文章图片

• 2.2.包的建立和数据库表建立

1.包

文章图片


dao 包和 biz 包是用三层架构的原理实现

文章图片



2.表
从 Oracle 数据库中建立表，我使用的是 tb_goods 商品表
create table tb_goods(
gid int primary key,--商品编号
gname varchar(30) not null,--商品名称
gprice float default(0) not null,--商品单价
ginfo varchar(1000),--商品描述信息
gpath varchar(100),--商品图片路径
gstatus number(2) default(0) not null--商品状态(默认是0)
)
准备数据
insert into tb_goods(gname,gprice,ginfo,gpath)
values('mp31',100,'mp31','images/1.jpg');
insert into tb_goods(gname,gprice,ginfo,gpath)
values('mp32',1200,'mp32','images/2.jpg');
insert into tb_goods(gname,gprice,ginfo,gpath)
values('mp33',100,'mp33','images/3.jpg');
insert into tb_goods(gname,gprice,ginfo,gpath)
values('mp34',1600,'mp34','images/4.jpg');
insert into tb_goods(gname,gprice,ginfo,gpath)
values('mp35',1500,'mp35','images/5.jpg');
insert into tb_goods(gname,gprice,ginfo,gpath)
values('mp36',1400,'mp36','images/6.jpg');
insert into tb_goods(gname,gprice,ginfo,gpath)
values('mp37',1700,'mp37','images/7.jpg');
insert into tb_goods(gname,gprice,ginfo,gpath)
values('mp38',1300,'mp38','images/8.jpg');
insert into tb_goods(gname,gprice,ginfo,gpath)
values('mp39',1500,'mp39','images/9.jpg');
insert into tb_goods(gname,gprice,ginfo,gpath)
values('mp310',1600,'mp310','images/10.jpg');
insert into tb_goods(gname,gprice,ginfo,gpath)
values('mp311',1600,'mp311','images/11.jpg');

首先，在 util 包中建 DBhelper 类用来连接数据库

public class DBhelper { //1.定义连接字符串 private static final String URL = "jdbc:oracle:thin:@localhost:1521:orcl"; private static final String CLASS_NAME = "oracle.jdbc.driver.OracleDriver"; //2.加载/注册驱动 static { try { Class.forName(CLASS_NAME); } catch (Exception e) { e.printStackTrace(); } }/** * 3.得到连接对象的方法 * @return * @throws SQLException */ public static Connection getCon() throws SQLException{ return DriverManager.getConnection(URL, "scott", "123"); }/** * 4.关闭/释放资源 * @param con 连接对象 * @param ps 执行对象 * @param rs 结果集对象 * @throws SQLException */ public static void closeObj(Connection con,PreparedStatement ps,ResultSet rs) throws SQLException{ if(con != null && con.isClosed()) con.close(); if(ps != null) ps.close(); if(rs != null) rs.close(); }public static void main(String[] args) throws SQLException { System.out.println(DBhelper.getCon()); }}

运行出这行字样证明连接成功（@后面的内容随机）：

文章图片


在 entity 包中建一个 Goods 实体类，实现对象序列化的接口 Serializable，分别实现他的 Set 和Get 方法、无参构造方法和 toString 方法。

public class Goods implements Serializable{ private static final long serialVersionUID = 1L; private int gid; //商品编号 private String gname; //商品名称 private Double gprice; //商品单价 private String ginfo; //商品描述信息 private String gpath; //商品图片路径 private int gstatus; //商品状态public int getGid() { return gid; }public void setGid(int gid) { this.gid = gid; }public String getGname() { return gname; }public void setGname(String gname) { this.gname = gname; }public Double getGprice() { return gprice; }public void setGprice(Double gprice) { this.gprice = gprice; }public String getGinfo() { return ginfo; }public void setGinfo(String ginfo) { this.ginfo = ginfo; }public String getGpath() { return gpath; }public void setGpath(String gpath) { this.gpath = gpath; }public int getGstatus() { return gstatus; }public void setGstatus(int gstatus) { this.gstatus = gstatus; }public static long getSerialversionuid() { return serialVersionUID; }public Goods() { // TODO Auto-generated constructor stub }public Goods(int gid, String gname, Double gprice, String ginfo, String gpath, int gstatus) { super(); this.gid = gid; this.gname = gname; this.gprice = gprice; this.ginfo = ginfo; this.gpath = gpath; this.gstatus = gstatus; }public Goods(int gid, String gname, Double gprice, String ginfo, String gpath) { super(); this.gid = gid; this.gname = gname; this.gprice = gprice; this.ginfo = ginfo; this.gpath = gpath; }@Override public String toString() { return "Goods [gid=" + gid + ", gname=" + gname + ", gprice=" + gprice + ", ginfo=" + ginfo + ", gpath=" + gpath + ", gstatus=" + gstatus + "]"; }}

• 2.3.方法

需要的方法（带有模糊查询的分页和获取最大页码的方法），因为是使用三层架构，所以方法不能只写在一个类里面。
在 dao 包在 IGoodsDao 接口中

public interface IGoodsDao { /** * 查询所有（分页/模糊） * @param pageIndex * @param str * @return * @throws SQLException */ List query(Integer pageIndex, String str) throws SQLException; /** * 获取最大页码（模糊查询） * @param str * @return * @throws SQLException */ int getMaxPage(String str) throws SQLException; }

在实现包 impl 中的 GoodsDao 类中（实现 IGoodsDao 接口）

@SuppressWarnings("all") public class GoodsDao implements IGoodsDao{ private Connection con; // 连接对象 private PreparedStatement ps; // 执行对象 private ResultSet rs; // 结果集对象 private Goods goods; private List listGoods; private Integer n; // 受影响的行数 private String sql; // 保存sql语句 private Integer maxPage; // 最大页码@Override public List query(Integer pageIndex,String str) throws SQLException{ Integer pageSize = 3; int start = (pageIndex - 1) * pageSize + 1; int end = pageIndex * pageSize; listGoods = new ArrayList(); con = DBhelper.getCon(); sql = "select * from (select rownum myid,a.* from tb_goods a where gname like ?) b" + " where myid between ? and ?"; ps = con.prepareStatement(sql); ps.setString(1, "%"+str+"%"); ps.setInt(2, start); ps.setInt(3, end); rs = ps.executeQuery(); while(rs.next()) { goods = new Goods(rs.getInt("gid"), rs.getString("gname"), rs.getDouble("gprice"), rs.getString("ginfo"), rs.getString("gpath")); listGoods.add(goods); } DBhelper.closeObj(con, ps, rs); return listGoods; }@Override public int getMaxPage(String str) throws SQLException{ con = DBhelper.getCon(); sql = "select count(0) from tb_goods where gname like ?"; ps = con.prepareStatement(sql); ps.setString(1, "%"+str+"%"); rs = ps.executeQuery(); if(rs.next()) { maxPage = rs.getInt(1) / 3; if(rs.getInt(1) % 3 != 0) { maxPage ++; } } DBhelper.closeObj(con, ps, rs); return maxPage; }}

@SuppressWarnings("all")的作用是抑制一些无关紧要的警告。

同理，
在 biz 包在 IGoodsBiz 接口中

public interface IGoodsBiz { /** * 查询所有（分页/模糊） * @param pageIndex * @param str * @return * @throws SQLException */ List query(Integer pageIndex, String str) throws SQLException; /** * 获取最大页码（模糊查询） * @param str * @return * @throws SQLException */ int getMaxPage(String str) throws SQLException; }

在实现包 impl 中的 GoodsBiz 类中（实现 IGoodsBiz 接口）

public class GoodsBiz implements IGoodsBiz{ // 调用业务逻辑层 IGoodsDao igd = new GoodsDao(); @Override public List query(Integer pageIndex, String str) throws SQLException { return igd.query(pageIndex, str); }@Override public int getMaxPage(String str) throws SQLException { return igd.getMaxPage(str); }}

【eclipse|jQuery ajax(无刷新分页)】
3.案例演示 初始效果展示（没有功能）

文章图片


主界面代码（开头）:

这里除了引用了 jQuery 库，还引用了 bootstrap 的 css 和 js 库。如果想要了解 bootstrap，指引：
https://blog.csdn.net/weixin_62332711/article/details/123910490

CSS样式代码:

td{ vertical-align: middle!important; text-align: center; font-weight: bolder; } hr{ width:1000px; height:2px; background-color: red }

JS代码：

HTML代码：

  查询

• 首页
• 上一页
• 当前页：/
• 下一页
• 末页

（结尾）

servlet 包下的 LoadDataServlet 类

@SuppressWarnings("all")
@WebServlet("/loadDataServlet.do")
public class LoadDataServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
try {
// 设置编码
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html; charset = utf-8");

// 获取out内置对象
PrintWriter out = resp.getWriter();
// 调用业务逻辑层
IGoodsBiz igb = new GoodsBiz();

// 获取前端提交的模糊查询关键字和页码参数
String str = req.getParameter("sname");
if(null == str) {
str = "";
}
Integer pageIndex = Integer.parseInt(req.getParameter("pid"));

// 调用带有模糊查询分页的方法
List listGoods = igb.query(pageIndex, str);
// 调用获取最大页码的方法
int maxPage = igb.getMaxPage(str);

// 实例化Test对象
Test test = new Test(listGoods, maxPage);

Test类

在entity包中建一个类，为Test，用来保存分页的listGoods集合和求最大页码的方法，再到 LoadDataServlet中去实例化 public class Test implements Serializable{ private static final long serialVersionUID = 1L; private List listGoods; private Integer maxPage; public List getListGoods() { return listGoods; } public void setListGoods(List listGoods) { this.listGoods = listGoods; } public Integer getMaxPage() { return maxPage; } public void setMaxPage(Integer maxPage) { this.maxPage = maxPage; } public static long getSerialversionuid() { return serialVersionUID; } public Test() { // TODO Auto-generated constructor stub } public Test(List listGoods, Integer maxPage) { super(); this.listGoods = listGoods; this.maxPage = maxPage; } @Override public String toString() { return "Test [listGoods=" + listGoods + ", maxPage=" + maxPage + "]"; } }

// 把test对象保存在JSON字符串中
String jsonStr = JSON.toJSONString(test); // toJSONString：转换成JSON格式的字符串

// 将响应新信息输出/响应到前端
out.write(jsonStr); // 把JSON字符串响应到前端
out.flush();
out.close();

} catch (Exception e) {
e.printStackTrace();
}

}
}

最终效果演示：

完。
感谢观看！！！

推荐阅读

• 

  20款荣放个crv哪个好 020新款荣放与crv怎么选
• 

  广州南沙妈祖文化节2023时间表 广州南沙妈祖营业时间
• 

  中医透药治疗仪多少钱 正安医疗骗局
• 

  他13岁目睹母亲被杀,给父亲赚够养老钱后仇杀3人,刑前：爸,没事的
• 

  比者的意思 比者的解释
• 

  四神汤和四君子汤哪个更好
• 

  安卓判断服务是否开启
• 

  菠菜为什么出苗不好 菠菜播种出苗率低怎么办
• 

  爱拉维尔摄影 爱多维摄影
• 

  和田玉好还是翡翠好 和田玉翡翠谁更好
• 

  邮政月月升10万一天多少利息,十万块钱存邮政一个月利息大概是多少钱？
• 

  苏州庭樾雅园二期人才优购房公告 苏州悦庭
• 

  14天长投基金课程学习
• 

  车门小凹陷用吸盘可以拉出来吗 车门凹陷进去用什么吸盘好
• 

  2023上海市嘉定社保缴纳基数是多少，上海社保费用如何计算？
• 

  table合并单元格宽度自适应
• 

  webkit功能选项详解，WebKit是什么意思
• 

  孩子|你是被吼大的吗？被吼大的孩子有五个致命的性格缺陷
• 

  林内热水器半边烧半边不烧怎么办,要学会这样来挑选
• 

  苹果xr最新价格，苹果11和苹果xr比较

• eclipse|easyui02
• 算法|图神经网络（01）-图与图学习(上)
• java|使用uuid做MySQL主键，被老板，爆怼一顿！
• 软件构造|软件构造（设计模式总结）
• idea|【IDEA插件】 EasyCode
• java|idea mybatis xml 跳转
• java|LambdaQueryWrapper使用说明
• JavaWeb|JavaWeb之Servlet核心技术
• java|Spring Boot读取Excel表格快速上手