ajax实现无刷新分页-CFANZ编程社区

实现无刷新分页的必要性：

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

分页的俩个要点：1.有多少页；2.每页有多少条记录

实现一个无刷新页面的步

1、一个有数据的表商品表（goods）

2、照常引入jQuery的类库

3、建立table表格

4、新起一个script块
4.1写一个方法专门控制分页

@Override
   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;
   }

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

   @Override
   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;
   }

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

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

5、建立PageServlet

package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;
import com.zking.biz.GoodsBiz;
import com.zking.biz.IGoodsBiz;
import com.zking.entity.Goods;

@WebServlet("/page.do")
public class PageServlet extends HttpServlet{

   @Override
   protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       doPost(req, resp);
   }

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

       //获取out
       PrintWriter out=resp.getWriter();

       int pageIndex=1;
       int pageSize=5;

       //接收pid
       String pid=req.getParameter("pid");
       if(pid!=null) {
           pageIndex=Integer.parseInt(pid);
       }

       //调用biz层的分页方法
       IGoodsBiz igb=new GoodsBiz();
       //商品集合
       List<Goods> ls=igb.getAllByPage(pageIndex, pageSize);
       //获取最大页码
       int max=igb.getMax("goods", pageSize);
       //把集合转为String
       String str=JSON.toJSONString(ls);
       //把响应输送到客户端
       out.print(str+"*"+max);//特殊字符做拼接
       out.flush();
       out.close();
   }

}

6、主界面的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(){
       //默认显示第1页
       myf('a');
   })
   //扩大作用域
   var pageIndex;
   var max;
   //写一个方法专门控制分页
   function myf(type){
       if(type=='a'){
           //首页
           pageIndex=1;
       }
       else if(type=='b'){
           //上一页
           if(pageIndex>1){
               pageIndex--;
           }
           else{
               alert("兄die，已经是第一页了嘞");
           }
       }
       else if(type=='c'){
           //下一页
           if(pageIndex<max){
               pageIndex++;
           }
           else{
               alert("兄die，已经是最后一页了嘞");
           }
       }
       else{
           //末页
           pageIndex=max;
       }
       //ajax
       $.post("page.do", {pid:pageIndex}, function(data) {
           //用*分割
           var x=data.split("*");
           //x[0]代表json格式的对象数组字符串
           //x[1]代表max值
           //将json格式的对象数组字符串-->js的对象数组
           var ss=$.parseJSON(x[0]);
           //给max赋值
           max=parseInt(x[1]);
           var sb="<table border=\"1px\"><tr align='center'><td>商品序号</td><td>商品名称</td><td>商品图片</td></tr>";
           //循环遍历
           $.each(ss, function(i, g) {//下标，元素=对象
               sb+="<tr align='center'>";
               sb+="<td>"+g.gid+"</td>";
               sb+="<td>"+g.gname+"</td>";
               sb+="<td><img src='"+g.gpath+"'/></td>";
               sb+="</tr>";
           })
           sb+="</table>";
           sb+="["+pageIndex+"/"+max+"]";
           //给div赋值
           $("#aa").html(sb);
       })
   }
</script>
</head>
<body>
   <center>
       <img src="images/17.jpg">
       <input>
       <div id="aa"></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>

完成以上步骤即可利用Ajax实现无刷新分页！