Ajax实现商品无刷新分页

一$.post替换$.ajax

$.post

常用参数	说明
url	一个用来包含发送请求URL字符串(请求地址)
data	发送到服务器的数据(参数)key/value
success(data)	请求成功的回调函数
type	放回格式内容(xml，json，text等)

注：$.post和$.ajax的区别在于$.post没有失败回调函数(而$.ajax的type参数可以设置请求方式，$.post更直接)

二，准备工作

2.1先在src写好DBHelper，包名为com.zking.util(连接Oracle)

package com.zking.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

/**
 * 数据库的铺装类
 * @author zjjt
 *
 * 2022年2月26日2022年2月26日下午4:14:27
 */
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, "scott","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();
		}
	}
}

2.2创建一个实体类Goods，包名为(com.zking.entity)

package com.zking.entity;

import java.io.Serializable;

/**
 * 实体类：商品
 * @author zjjt
 *
 */
public class Goods implements Serializable{
	/**
	 * 
	 */
	private static final long serialVersionUID = 930986804314652051L;
	private int gid;//商品编号
	private String gname;//商品名称
	private double gprice;//商品单价
	private String ginfo;//商品描述信息
	private String gpath;//商品路径
	private int gzt;
	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 getGzt() {
		return gzt;
	}
	public void setGzt(int gzt) {
		this.gzt = gzt;
	}
	public Goods() {
		// TODO Auto-generated constructor stub
	}
	public Goods(int gid, String gname, double gprice, String ginfo, String gpath,int gzt) {
		super();
		this.gid = gid;
		this.gname = gname;
		this.gprice = gprice;
		this.ginfo = ginfo;
		this.gpath = gpath;
		this.gzt = gzt;
	}
	
}

2.3在src创建一个GoodsDao，包名为(com.zking.dao.impl)

package com.zking.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.zking.dao.IGoodsDao;
import com.zking.entity.Goods;
import com.zking.util.DBHelper;

/**
 * 商品方法类
 * @author zjjt
 *
 */
public class GoodsDao implements IGoodsDao{
	private Connection con = null;
	private PreparedStatement ps = null;
	private ResultSet rs = null;
	
	/**
	 * 商品分页
	 * @param pageIndex 第几页
	 * @param pageSize 每页多少条数据
	 * @return 商品集合
	 */
	public List<Goods> getAll(int pageIndex,int pageSize){
		List<Goods> ls = new ArrayList<Goods>();
		int a = (pageIndex-1)*pageSize+1;
		int b = pageIndex*pageSize;
		try {
			con = DBHelper.getCon();
			String sql = "select * from(select a.*,rownum as rid from goods a) b where b.rid between ? and ?";
			ps = con.prepareStatement(sql);
			ps.setInt(1, a);
			ps.setInt(2, b);
			rs = ps.executeQuery();
			while(rs.next()) {
				 Goods n = new Goods();
				 n.setGid(rs.getInt(1));
				 n.setGname(rs.getString(2));
				 n.setGprice(rs.getDouble(3));
				 n.setGinfo(rs.getString(4));
				 n.setGpath(rs.getString(5));
				 n.setGzt(rs.getInt(6));
				 //放到集合中去
				 ls.add(n);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			DBHelper.myClose(con, ps, rs);
		}
		return ls;
	}
	/**
	 * 拿到总行数
	 * @param str 你要查到表名
	 * @return
	 */
	public int getRow(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;
	}
	

}

2.4src具体要用到的包和类(采用的是mvc模式)

mvc分析图

 

 

jar包

 2.5开始编写myloadservlet，包名为(com.zking.dao.impl)

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.IGoodsbiz;
import com.zking.biz.impl.Goodsbiz;
import com.zking.entity.Goods;
@WebServlet("/page.do")
public class myloadservlet 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;//每页5条数据
		//接收pid
		String pid = req.getParameter("pid");
		if(pid!=null) {//防止空指针异常
			pageIndex=Integer.parseInt(pid);
		}
		//调用biz层的分页方法
		IGoodsbiz igb = new Goodsbiz();
		List<Goods> ls = igb.getAll(pageIndex, pageSize);
		//获取最大页码数
		int row = igb.getRow("goods");//返回最大行数
		int max = row/pageSize;
		if(row%pageSize!=0) {//加入出不尽就加一
			max++;
		}
		//把集合转为String
		String str = JSON.toJSONString(ls);
		out.print(str+"*"+max);
		out.flush();//刷新
		out.close();//关闭
	}
}

注：@WebServlet("/page.do")相当于web.xml的配置和映射

2.6准备工作已弄完开始编写界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入JQuery内库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!-- 另起一个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 a = data.split("*");
			//a[0]代表json格式
			//a[1]代表最大页码数(max值)
			var ss = $.parseJSON(a[0]);//将json格式的对象数字转为-->js的对象数组
			max = parseInt(a[1]);//给max赋值
			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>
		<div id="aa"></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>
		<input/>
</body>
</html>

预览效果: 刚进来的主界面

当前页数本来就是1然后点 上一页出来的效果

当前页数为最后一页点下一页的效果

 

注意：文本是没有给它绑值的我输入字就是为了看有没有实现局部刷新的分页