JavaWeb(ajax实现无刷新分页)

最新推荐文章于 2022-05-06 09:41:06 发布

大大怪僵軍

最新推荐文章于 2022-05-06 09:41:06 发布

阅读量230

点赞数

分类专栏： ajax 文章标签： java

本文链接：https://blog.csdn.net/m0_68756200/article/details/123799105

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

分页有两个要点：1.有多少页，2.每页有多少条记录。

为什么要实现无刷新的分页：
传统方式实现商品分页效果，每次分页的时候都会使得大部分已经显示的信息重新从服务器获得出来，这样对服务器资源、用户等待时间都有的损耗。但如果使用ajax无刷新分页，每次就只从服务器获得需要信息即可，对各方面的资源使用时间就有相应的减少，因此便是ajax无刷新分页必要性。

新建实体类和dao方法其中拿到某个表的总行数最为重要max 为求最大页码

public int getRows(String str) {
       int n = 0;
       try {
           con=DBHelper.getCon();
           String sql="select count(*) from "+str;
           ps=con.prepareStatement(sql);
           rs=ps.executeQuery();
           if(rs.next()) {
               n=rs.getInt(1);
           }
       } catch (Exception e) {
           e.printStackTrace();
       } finally {
           DBHelper.myClose(con, ps, rs);
       }
       return n;
   }

public List<Goods> getAllByPage(int pageIndex, int pageSize) {
       List<Goods> ls=new ArrayList<Goods>();
       try {
           con=DBHelper.getCon();
           String sql="select * from(select a.*,rownum as rid from goods a) b where b.rid between ? and ?";
           int a = (pageIndex-1)*pageSize+1;
           int b = pageIndex*pageSize;
           ps=con.prepareStatement(sql);
           //给占位符赋值
           ps.setInt(1, a);
           ps.setInt(2, b);
           rs=ps.executeQuery();
           while(rs.next()) {
               Goods g=new Goods();
               g.setGid(rs.getInt(1));
               g.setGname(rs.getString(2));
               g.setGprice(rs.getInt(3));
               g.setGinfo(rs.getString(4));
               g.setGpath(rs.getString(5));
               ls.add(g);
           }
       } catch (Exception e) {
           e.printStackTrace();
       } finally {
           DBHelper.myClose(con, ps, rs);
       }
       return ls;
   }

在Biz层封装一个获得最大值的方法

public int getMax(String str, int pageSize) {
       int rows = igd.getRows(str);//拿到总行数
       int max = rows/pageSize;//求页码
       if(rows%pageSize!=0) {//判断是否能够除得尽
           max++;
       }
       return max;
}

创建PageServlet

@WebServlet("/page.do")//代替web.xml的配置映射，更加简便（注意写好该代码要重新启动服务器不然会出现404找不到页面）

public class PageServlet extends HttpServlet{

   @Override
   protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       // TODO Auto-generated method stub
       doGet(req, resp);
   }

   @Override
   protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       // TODO Auto-generated method stub
       req.setCharacterEncoding("utf-8");
       resp.setContentType("text/html; charset=UTF-8");

       int pageIndex = 1;
       int pageSize = 5;

       PrintWriter out = resp.getWriter();
       String pid = req.getParameter("pid");
       if(pid!=null) {
           pageIndex = Integer.parseInt(pid);
       }
       IGoodsBiz igb = new GoodsBiz();
       List<Goods> ls = igb.getAllByPage(pageIndex, pageSize);
       String str = JSON.toJSONString(ls);
       int max=igb.getMax("goods", pageSize);
       out.print(str+"*"+max);
       out.flush();
       out.close();
   }
}

主界面的html和jQuery代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
   $(function() {
       myf(a);//默认第一页
   })
   var pageIndex;
   var max;
   function myf(type) {
       if(type=='a'){
           pageIndex = 1;
       }
       else if(type=='b'){
           //上一页
           if(pageIndex>1){
               pageIndex--;
           }
           else{
               alert("前面没有了");
           }
       }
       else if(type=='c'){
           //下一页
           if(pageIndex<max){
               pageIndex++;
           }
           else{
               alert("已经是最后一页");
           }
       }
       else{
           //末页
           pageIndex=max;
       }
       $.post("page.do", {pid:pageIndex}, function(data) {
           var x=data.split("*");//分割
           var ss=$.parseJSON(x[0]);//商品信息
           max=parseInt(x[1]);//最大页数
           var sb = "<table align=\"center\" border=\"1px\"><tr><td>商品序号</td><td>商品名称</td><td>商品图片</td></tr>";//实现信息展示于表格内的效果
           $.each(ss, function(i, g) {//数组下标，元素（对象）
               sb+="<tr>";
               sb+="<td>"+g.gid+"</td>";
               sb+="<td>"+g.gname+"</td>";
               sb+="<td><img src='"+g.gpath+"'/></td>";
               sb+="</tr>";
           })
           sb+="</table>";//表格结尾，注意要加在最后面
           $("#d").html(sb);//给容器赋值
       })
   }
</script>
</head>
<body>

   <center>
       <div id="d"></div>
       <div>
           <a href="javascript:myf('a')">首页</a> 
           <a href="javascript:myf('b')">上一页</a> 
           <a href="javascript:myf('c')">下一页</a> 
           <a href="javascript:myf('d')">末页</a> 
       </div>
   </center>

</body>
</html>

大大怪僵軍

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb(ajax实现无刷新分页)

分页有两个要点：1.有多少页，2.每页有多少条记录。为什么要实现无刷新的分页：传统方式实现商品分页效果，每次分页的时候都会使得大部分已经显示的信息重新从服务器获得出来，这样对服务器资源、用户等待时间都有的损耗。但如果使用ajax无刷新分页，每次就只从服务器获得需要信息即可，对各方面的资源使用时间就有相应的减少，因此便是ajax无刷新分页必要性。新建实体类和dao方法其中拿到某个表的总行数最为重要max 为求最大页码public int getRows(String str)...
复制链接

扫一扫