运用ajay实现无刷新分页

回归正题：

我们为什么要用Ajax来实现分页??

Ajax刷新相比于severlet技术，severlet则会每次都会刷新整个页面。Ajax则不然,相较于severlet跳转技术Ajax只会刷新局部不会刷新整个页面，也就是说这样会提升整个运行进程。

接下来就开始实际操作:

第一步:准备工作

在数据库中建一个你要展示的表，我这里数据先用goods表保存

先创建一个JavaWbe项目，然后就是连接数据库，我呢也是用DBHelper类来表示

package com.zking.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
/**
 * 数据库辅助类
 * @author zjjt
 *
 */
public class DBHelper {
	
	//两个静态常量
	private static final String URL="jdbc:oracle:thin:@localhost:1521:orcl";
	private static final String CNAME="oracle.jdbc.driver.OracleDriver";
	
	//加载驱动
	static {
		try {
			Class.forName(CNAME);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	/**
	 * 创建连接
	 * @return 连接
	 */
	public static Connection getCon() {
		Connection con=null;
		try {
			con=DriverManager.getConnection(URL, "xtf", "tiger");
		} catch (Exception e) {
			e.printStackTrace();
		}
		return con;
	}
	
	/**
	 * 关闭资源
	 * @param con 连接
	 * @param ps 执行对象
	 * @param rs 结果集
	 */
	public static void myClose(Connection con,PreparedStatement ps,ResultSet rs) {
		try {
			if(con!=null&&!con.isClosed()){
				con.close();
			}
			if(ps!=null){
				ps.close();
			}
			if(rs!=null){
				rs.close();
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
}

最后就是在dao包里依次敲出你所需的方法 

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

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

第二步:编写severlet

创建severlet类后，需在类中调用dao类中的方法然后就需要通过json包来返回json文件。接下来我们就可以调用dao类中的方法从而找到数据库的数据,然后再将数据用list集合存起来，最后我们可以把它转为json文件用String类型保存。

​
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();
	}
	
}
 
​

第三步：展示

我们在WebContent文件里创建一个jsp类，我这里用index来展示。最后我们把该调用的调用，该写的写上

<%@ 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>&nbsp;
			<a href="javascript:myf('b')">上一页</a>&nbsp;
			<a href="javascript:myf('c')">下一页</a>&nbsp;
			<a href="javascript:myf('d')">末页</a>&nbsp;
		</div>
	</center>
	
</body>
</html>

最后是效果图