ajax实现分页_用servlet,javascript,ajax实现分页-CSDN博客

本文链接：https://blog.csdn.net/weixin_67338832/article/details/124437827

实体类：

package com.zking.mvc.cart.entiy;

import java.io.Serializable;

/**
 * 商品实体
 * @author
 *
 * 2022年4月21日下午6:29:33
 */
public class Goods implements Serializable{
	
	private static final long serialVersionUID = 172021583561153335L;
	
	private int gid;
	private String gname;
	private int gprice;
	private String ginfo;
	private String gpath;
	private String 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 int getGprice() {
		return gprice;
	}
	public void setGprice(int 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 String getGzt() {
		return gzt;
	}
	public void setGzt(String gzt) {
		this.gzt = gzt;
	}
	
	public Goods() {
		// TODO Auto-generated constructor stub
	}
	public Goods(int gid, String gname, int gprice, String ginfo, String gpath, String gzt) {
		this.gid = gid;
		this.gname = gname;
		this.gprice = gprice;
		this.ginfo = ginfo;
		this.gpath = gpath;
		this.gzt = gzt;
	}

	
	public Goods(String gname, int gprice, String ginfo, String gpath, String gzt) {
		this.gname = gname;
		this.gprice = gprice;
		this.ginfo = ginfo;
		this.gpath = gpath;
		this.gzt = gzt;
	}
	@Override
	public String toString() {
		return "Goods [gid=" + gid + ", gname=" + gname + ", gprice=" + gprice + ", ginfo=" + ginfo + ", gpath=" + gpath
				+ ", gzt=" + gzt + "]";
	}

	
	
	
}

dao方法：

package com.zking.mvc.cart.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.mvc.cart.entiy.Goods;
import com.zking.mvc.cart.utils.DBHelper;

public class GoodsDaoimpl implements IGoodsDao {

	@Override
	public List<Goods> queryGoodsAll() {
		// TODO Auto-generated method stub
		//1.定义对应的三兄弟以及其他相关变量
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		String sql = "";
		Goods goods = null;
		List<Goods> list = new ArrayList<Goods>();
		//2.给对应的对象以及其他相关变量
		try {
			//获取连接
			con = DBHelper.getCon();
			//定以sql语句
			sql = "select * from tb_goods";
			//执行sql语句
			ps = con.prepareStatement(sql);
			//获得结果集
			rs = ps.executeQuery();
			//遍历结果集
			while(rs.next()) {
				//实例化
				goods = new Goods();
				//赋值
				goods.setGid(rs.getInt(1));
				goods.setGname(rs.getString(2));
				goods.setGprice(rs.getInt(3));
				goods.setGinfo(rs.getString(4));
				goods.setGpath(rs.getString(5));
				goods.setGzt(rs.getString(6));
				//加到集合中
				list.add(goods);
				
			}
			
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}finally {
			DBHelper.myClose(con, ps, rs);
		}
		//3.返回结果集
		return list;
	}

	
	
	@Override
	public Goods getGoodsByGid(int gid) {
		// TODO Auto-generated method stub
		//1.定义对应的三兄弟以及其他相关变量
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		String sql = "";
		//实例化
		Goods goods = new Goods();

		//2.给对应的对象以及其他相关变量
		try {
			//获取连接
			con = DBHelper.getCon();
			//定以sql语句
			sql = "select * from tb_goods where gid=?";
			//执行sql语句
			ps = con.prepareStatement(sql);
			//给占位符赋值
			ps.setInt(1, gid);
			//获得结果集
			rs = ps.executeQuery();
			//遍历结果集
			while(rs.next()) {
				//赋值
				goods.setGid(rs.getInt(1));
				goods.setGname(rs.getString(2));
				goods.setGprice(rs.getInt(3));
				goods.setGinfo(rs.getString(4));
				goods.setGpath(rs.getString(5));
				goods.setGzt(rs.getString(6));
			}
			
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}finally {
			DBHelper.myClose(con, ps, rs);
		}
		//3.返回结果集
		return goods;
	}

	
	@Override
	public List<Goods> queryGoodsListAll(int pageIndex, int pageSize) {
		// 1.定义对应的三兄弟以及其它相关变量
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		String sql = "";
		Goods goods = null;
		List<Goods> list = new ArrayList<Goods>();
		
		int start = (pageIndex-1)*pageSize +1;
		int end = pageIndex * pageSize;
		
		
		
		// 2.给对应的对象及变量赋值
		try {
			// 获取链接
			conn = DBHelper.getCon();
			// sql
			sql = "select b.* from ( select a.*,rownum as rid from tb_goods a ) b where rid between "+start+" and "+end+"";
			// 执行sql语句
			ps = conn.prepareStatement(sql);
			// 返回结果集
			rs = ps.executeQuery();
			// 遍历结果集
			while (rs.next()) {
				//实例化
				goods = new Goods();
				//赋值
				goods.setGid(rs.getInt(1));
				goods.setGname(rs.getString(2));
				goods.setGprice(rs.getInt(3));
				goods.setGinfo(rs.getString(4));
				goods.setGpath(rs.getString(5));
				goods.setGzt(rs.getString(6));
				//加到集合中
				list.add(goods);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.myClose(conn, ps, rs);
		}
		// 3.返回结果
		return list;
	}

	@Override
	public List<Goods> queryGoodsListAll(int pageIndex, int pageSize, String searchName) {
		// 1.定义对应的三兄弟以及其它相关变量
				Connection conn = null;
				PreparedStatement ps = null;
				ResultSet rs = null;
				String sql = "";
				Goods goods = null;
				List<Goods> list = new ArrayList<Goods>();
				
				int start = (pageIndex-1)*pageSize +1;
				int end = pageIndex * pageSize;
				// 2.给对应的对象及变量赋值
				try {
					// 获取链接
					conn = DBHelper.getCon();
					// sql
					sql = "select b.* from ( select a.* , rownum as rid from ( select * from tb_goods where gname like '%"+searchName+"%' ) a ) b where b.rid between "+start+" and "+end+"";
					// 执行sql语句
					ps = conn.prepareStatement(sql);
					//System.out.print(sql);
					// 返回结果集
					rs = ps.executeQuery();
					// 遍历结果集
					while (rs.next()) {
						//实例化
						goods = new Goods();
						//赋值
						goods.setGid(rs.getInt(1));
						goods.setGname(rs.getString(2));
						goods.setGprice(rs.getInt(3));
						goods.setGinfo(rs.getString(4));
						goods.setGpath(rs.getString(5));
						goods.setGzt(rs.getString(6));
						//加到集合中
						list.add(goods);
					}
				} catch (Exception e) {
					e.printStackTrace();
				} finally {
					DBHelper.myClose(conn, ps, rs);
				}
				// 3.返回结果
				return list;
	}



	@Override
	public int Count(String table,String searchName) {
		// TODO Auto-generated method stub
		//1.定义对应的三兄弟以及其他相关变量
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		int n = 0;
		String sql = "";
		//2.给对应的对象以及其他相关变量
		try {
			//获取连接
			con = DBHelper.getCon();
			//定以sql语句
			sql = "select count(*) from "+table+" where gname like '%"+searchName+"%'";
			//执行sql语句
			ps = con.prepareStatement(sql);
			//获得结果集
			rs = ps.executeQuery();
			if(rs.next()) {
				n = rs.getInt(1);
			}
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}finally {
			DBHelper.myClose(con, ps, null);
		}
		//3.返回结果集
		return n;
	}

	
	
	public static void main(String[] args) {
		//System.out.println(new GoodsDaoimpl().queryGoodsListAll(1, 13, ""));
	}
	
	
	
	
}

Servlet

package com.zking.mvc.cart.servlet;

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

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.fasterxml.jackson.databind.ObjectMapper;
import com.zking.mvc.cart.biz.impl.GoodsBizimpl;
import com.zking.mvc.cart.biz.impl.IGoodsBiz;
import com.zking.mvc.cart.entiy.Goods;

/**
 * Servlet implementation class AdminGoosListServlet
 */
@WebServlet("/AdminGoosListServlet")
public class AdminGoosListServlet extends HttpServlet {
	
	//业务逻辑层
	IGoodsBiz igb = new GoodsBizimpl();
	
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(request, response);
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//设置编码方式
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		int pageIndex = 1;
		int pageSize = 3;
		
		String searchName = request.getParameter("searchName");
		if(searchName==null) {
			searchName = "";
		}
		//获得总记录数
		int n =igb.Count(" tb_goods",searchName);
		//根据总行数记录数和每页显示的条数  求最大页码
		int pageMax = n/pageSize;
		if(n%pageSize!=0) {
			pageMax++;
		}
		
		String pIndex = request.getParameter("pageIndex");
		if(null!=pIndex) {
			pageIndex = Integer.valueOf(pIndex);
		}
		
		
		//模糊查询分页
		List<Goods> adminGoodsList = igb.queryGoodsListAll(pageIndex, pageSize, searchName);
		
		PrintWriter out = response.getWriter();
		//创建JSON工具
		ObjectMapper mapper = new ObjectMapper();
		//String result = mapper.writeValueAsString(adminGoodsList);
		//通过ajax传输数据后台---前台有多个值 使用map集合
		Map<String, Object> maps = new HashMap<String, Object>();
		
		maps.put("adminGoodsList", adminGoodsList);
		maps.put("pageMax", pageMax);
		
		String result = mapper.writeValueAsString(maps);
		
		out.write(result);
		out.flush();
		out.close();
		
	}

}

jsp界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!--通过taglib标准标签库  -->    
  <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html >
<html>
<head>
<meta  charset="UTF-8">
<title>Insert title here</title>
<!-- 通过cdn远程服务加载jquery类库 -->
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	
	//获取全路径
	var path = "${pageContext.request.servletContext.contextPath}";
	//定义全局变量保存当前的页码
	let pageIndex = 1;
	let pageMax = 0;//初始化最大页码
	
	//下一页的点击事件
	function nextBtn(){
		if(pageIndex>=pageMax){
			pageIndex = pageMax;
		}
		else{
			pageIndex++;
		}
		let searchName =$("#searchName").val();
		//alert(searchName);
		//alert(pageIndex);
		indeLoad(searchName);
	}
	
	//上一页的点击事件
	function lastBtn(){
		if(pageIndex<=1){
			pageIndex =1;
		}
		else{
			pageIndex--;
		}
		let searchName =$("#searchName").val();
		//alert(searchName);
		//alert(pageIndex);
		indeLoad(searchName);
	}
	
	//尾页页的点击事件
	function last(){
		pageIndex = pageMax;
		let searchName =$("#searchName").val();
		//alert(searchName);
		//alert(pageIndex);
		indeLoad(searchName);
	}
	
	//首页的点击事件
	function frist(){
		pageIndex = 1;
		let searchName =$("#searchName").val();
		//alert(searchName);
		//alert(pageIndex);
		indeLoad(searchName);
	}
		
	//利用ajax来实现数据分页
	$(function(){
		//alert(123);
		//调用post方法  传入servlet中拿到数据后  返回出来
		indeLoad("");
		$("#searchBtn").click(function(){
			//获取输入框的值
			let searchName = $("#searchName").val();
			//alert(searchName);
			indeLoad(searchName);
		});
		
	});
	
	
	//封装  数据加载的post请求
	function indeLoad(searchName){
		
		$.post(path+"/AdminGoosListServlet",{"pageIndex":pageIndex,"searchName":searchName},function(msg){
			//alert(msg);
			//后台传递过来的数据是字符串，满足JSON格式的定义
			let list = $.parseJSON(msg);
			//servlet中传递过来的最大页码
			pageMax = list.pageMax;
			
			let str = "<table border=\"1\" cellspacing = \"0\" cellpadding = \"0\" width = \"100%\">";
			str+="<tr>";
				str+="<td>商品编号</td>";
				str+="<td>商品名称</td>";
				str+="<td>商品价格</td>";
				str+="<td>商品描述</td>";
				str+="<td>商品图片</td>";
				str+="<td>操作</td>";
			str+="</tr>";

			//console.log(list.adminGoodsList);
			$.each(list.adminGoodsList,function(index,obj){
				//console.log(a,b);
				str+="<tr>";
					str+="<td>"+obj.gid+"</td>";
					str+="<td>"+obj.gname+"</td>";
					str+="<td>"+obj.gprice+"</td>";
					str+="<td>"+obj.ginfo+"</td>";
					str+="<td><img src= '"+path+"/"+obj.gpath+"' width=\"80\" height=\"50\" /></td>";
					str+="<td><a href=\"AddCartServlet?gid="+obj.gid+"\">加入购物车</a></td>";
				str+="</tr>";
			});
			str+="</table>";
			$("#content").html(str);
			
			$("#pIndex").html(pageIndex);
			$("#pMax").html(pageMax);
			
		});
		
	}
	
	
</script>
</head>
	<body>
		<div>
			<input type="text" id="searchName" />
			<button id="searchBtn">搜索</button>
		</div>
		<div id = "content" style ="width:70%;background: pink;height:250px;text-align: center;margin:0 auto;">
		
		</div>
			<div style = "text-align: center">
		《<span id = "pIndex"></span>/<span id = "pMax"></span>》
		<a href = "javascript:frist()">首页</a>
		<a href = "javascript:lastBtn()">上一页</a>
		<a href = "javascript:nextBtn()">下一页</a>
		<a href = "javascript:last()">尾页</a>
	
	</div>
		
	
	
	
	</body>
</html>

效果