回归正题:
我们为什么要用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>
<a href="javascript:myf('b')">上一页</a>
<a href="javascript:myf('c')">下一页</a>
<a href="javascript:myf('d')">末页</a>
</div>
</center>
</body>
</html>