jQuery ajax(无刷新分页)

目录

1,ajax(无刷新分页)

2,导入jar包&js库

3,方法&实体类

 4,案例演示

---

1,ajax(无刷新分页)

获取数据库中大量的信息显示在页面上，必然要使用到分页查询；若不使用Ajax，而是用其他的方法，肯定是要刷新页面的，用户体检很不好，所以最好使用Ajax的方法写分页查询；

2,导入jar包&js库

3,方法&实体类

public class Goods {
	private int gid; // 商品编号
	private String gname; // 商品名称
	private double gprice;// 商品单价
	private String ginfo; // 商品描述信息
	private String gpath; // 商品图片路径
	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 Goods() {
		// TODO Auto-generated constructor stub
	}
	public Goods(int gid, String gname, double gprice, String ginfo, String gpath) {
		this.gid = gid;
		this.gname = gname;
		this.gprice = gprice;
		this.ginfo = ginfo;
		this.gpath = gpath;
	}
	public Goods(String gname, double gprice, String ginfo, String gpath) {
		this.gname = gname;
		this.gprice = gprice;
		this.ginfo = ginfo;
		this.gpath = gpath;
	}
	
}

public class Nb {
	private List<Goods> listGoods = new ArrayList<Goods>();
	private int maxPage;
	public List<Goods> getListGoods() {
		return listGoods;
	}
	public void setListGoods(List<Goods> listGoods) {
		this.listGoods = listGoods;
	}
	public int getMaxPage() {
		return maxPage;
	}
	public void setMaxPage(int maxPage) {
		this.maxPage = maxPage;
	}
	public Nb() {
		// TODO Auto-generated constructor stub
	}
	public Nb(List<Goods> listGoods, int maxPage) {
		super();
		this.listGoods = listGoods;
		this.maxPage = maxPage;
	}
	
}

 订单项

public class OrderItem {
	private Goods goods;
	private int gcount;
	private double gsum;
	
	//计算订单项的价格	
	public void calc() {
		this.gsum = this.goods.getGprice() * this.gcount;
	}
	
	public Goods getGoods() {
		return goods;
	}
	public void setGoods(Goods goods) {
		this.goods = goods;
	}
	public int getGcount() {
		return gcount;
	}
	public void setGcount(int gcount) {
		this.gcount = gcount;
	}
	public double getGsum() {
		return gsum;
	}
	public void setGsum(double gsum) {
		this.gsum = gsum;
	}
	public OrderItem() {
		// TODO Auto-generated constructor stub
	}
	public OrderItem(Goods goods, int gcount, double gsum) {
		this.goods = goods;
		this.gcount = gcount;
		this.gsum = gsum;
	}
	public OrderItem(int gcount, double gsum) {
		this.gcount = gcount;
		this.gsum = gsum;
	}
	@Override
	public String toString() {
		return "OrderItem [goods=" + goods + ", gcount=" + gcount + ", gsum=" + gsum + "]";
	}
	
	
	
}

 GoodsDao 方法

public class GoodsDao implements IGoodsDao{
	private List<Goods> listGoods = new ArrayList<Goods>();
	private Connection con = null;
	private PreparedStatement ps;
	private ResultSet rs;
	private Goods goods;
	private int maxPage;
	private String sql;
	private int n;
	
	@Override
	public List<Goods> listGoods(String pageIndex, String str) {
		int pageSize = 5;
		int start = (Integer.parseInt(pageIndex) -1) * pageSize +1;
		int end = Integer.parseInt(pageIndex) * pageSize;
		try {
			con = DBhelper.getCon();
			sql = "select * from (select a.*,rownum myrid from tb_goods a where gname like '%"+str+"%') b where myrid between ? and ?";
			ps = con.prepareStatement(sql);
			ps.setInt(1, start);
			ps.setInt(2, end);
			rs = ps.executeQuery();
			while(rs.next()) {
				goods = new Goods(rs.getInt(1), rs.getString(2), rs.getDouble(3), rs.getString(4), rs.getString(5));
				listGoods.add(goods);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBhelper.closeObj(con, ps, rs);
		}
		return listGoods;
	}
	
	@Override
	public int getMaxPage(String str) {
		try {
			con = DBhelper.getCon();
			sql = "select count(*) from tb_goods where gname like '%"+str+"%'";
			ps = con.prepareStatement(sql);
			rs = ps.executeQuery();
			if(rs.next()) {
				maxPage = rs.getInt(1) / 5;
				if(rs.getInt(1) % 5 != 0) {
					maxPage ++;
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBhelper.closeObj(con, ps, rs);
		}
		return maxPage;
	}
	
	@Override
	public int delGoods(String gid) {
		try {
			con = DBhelper.getCon();
			sql = "delete from tb_goods where gid = "+gid;
			ps = con.prepareStatement(sql);
			n = ps.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBhelper.closeObj(con, ps, rs);
		}
		return n;
	}
	@Override
	public int updateGoods(Goods goods) {
		try {
			con = DBhelper.getCon();
//			sql = "update tb_goods(gname,)";
			ps = con.prepareStatement(sql);
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBhelper.closeObj(con, ps, rs);
		}
		return 0;
	}
	@Override
	public Goods list(String gid) {
		try {
			con = DBhelper.getCon();
			sql = "select * from tb_goods where gid = "+gid;
			ps = con.prepareStatement(sql);
			rs = ps.executeQuery();
			if(rs.next()) {
				goods = new Goods(rs.getInt(1), rs.getString(2), rs.getDouble(3), rs.getString(4), rs.getString(5));
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBhelper.closeObj(con, ps, rs);
		}
		return goods;
	}
	
	
	
}

 4,案例演示

 

 

public class DelGoodsServlet extends HttpServlet{
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setContentType("text/html;charset=utf-8");
		PrintWriter out = resp.getWriter();
		
		String gid = req.getParameter("gid");
		
		//调用业务逻辑层
		IGoodsBiz igb = new GoodsBiz();
		int n = igb.delGoods(gid);
	
		String str = "删除成功！";
		if(n==0) {
			str = "删除失败！";
		}
		
		out.print(str);
		out.flush();
		out.close();
		
	}
}

public class LoadServlet extends HttpServlet {
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setContentType("text/html;charset=utf-8");
		PrintWriter out = resp.getWriter();
		
		//获取前端传来的页码和模糊查询关键字
		String pageIndex = req.getParameter("pageIndex");
		String nameStr = req.getParameter("nameStr");
		
		//第一次加载页面的时候没有进行模糊查询，即文本框关键字为null，那么就查询所有数据
		if(nameStr == null) {
			nameStr = "";//模糊查询关键字为 ""，则表示查询所有数据
		}
		
		//业务逻辑层
		IGoodsBiz igb = new GoodsBiz();
		
		//调用模糊查询分页的方法
		List<Goods> listGoods = igb.listGoods(pageIndex, nameStr);
		
		//调用获取商品表最大页码的方法
		int maxPage = igb.getMaxPage(nameStr);
		
		//实例化Nb类
		Nb nb = new Nb(listGoods, maxPage);
		
		String str = JSON.toJSONString(nb);
		
		out.print(str);
		out.flush();
		out.close();
	}
}

<script type="text/javascript" src="/pro_page/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/pro_page/js/bootstrap.js"></script>
<link href="/pro_page/css/bootstrap.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	td{
		vertical-align: middle!important;
		text-align: center;
		font-weight: bolder;
	}
	hr{
		width:1000px;
		height:2px;
		background-color: red 
	}
</style>
</head>
<body style="background-image: url('images/绿色2.jpg');background-repeat: norepeat">
	<br />
	<center>	
		<div class="input-group">
			<input type='text' id = "sname" class="form-control" style="width: 250px" placeholder="请输入查询关键字"/>
			&nbsp;
			<button onclick="myload()" class="btn btn-success">查询</button>
		</div>
	</center>
	<br/>
	<div id="content" class="container">
	
	</div>
	<hr />
	<!-- 分页 -->
	<center>
		<div style="font-size: 18px">
			<ul class="pager">
				<li><a href="javascript:changePage('first')">首页</a></li>
				<li><a href="javascript:changePage('minus')">上一页</a></li>
				<li>
					<a>当前页：<span id="pid"></span>/<span id="maxPage"></span></a>
				</li>
				<li><a href="javascript:changePage('add')">下一页</a></li>
				<li><a href="javascript:changePage('last')">末页</a></li>
			</ul>
		</div>
	</center>
</body>
<script type="text/javascript">
	var pageIndex = 1;
	var nameStr;
	var maxPage;
	var listGoods;
	
	//删除商品
	function delGoods(gid){
		$.post("myDelGoodsServlet.do",{gid:gid},function(str){
			alert(str);
		})
		myload();
	}

	//翻页的方法
	function changePage(type){
		if(type == 'first'){//首页
			pageIndex = 1;
		}else if(type == 'add'){//下一页
			pageIndex ++;
			if(pageIndex >= maxPage){
				pageIndex = maxPage;
			}
		}else if(type == 'minus'){
			pageIndex --;
			if(pageIndex <= 1){
				pageIndex = 1;
			}
		}else{
			pageIndex = maxPage;
		}
		myload();
	}
	
	function myload(){
		//获取文本框的关键字
		var nameStr = $("#sname").val();
		$.post("myLoadServlet.do",{pageIndex:pageIndex,nameStr:nameStr},function(str){
			var nb = $.parseJSON(str);
			listGoods = nb.listGoods;
			maxPage = nb.maxPage;
			var sb = "<table class=\"table table-hover\">";
			sb += "<tr class=\"danger\" style=\"background:yellow;color: red;font-weight: bolder;font-size: 30px;\">";
			sb += "<td>商品序号</td>";
			sb += "<td>商品名称</td>";
			sb += "<td>商品价格</td>";
			sb += "<td>商品描述</td>";
			sb += "<td>商品图片</td>";
			sb += "<td>商品操作</td>";
			sb += "</tr>";
			$.each(listGoods,function(i,goods){
				sb += "<tr>";
				sb += "<td>"+goods.gid+"</td>";
				sb += "<td>"+goods.gname+"</td>";
				sb += "<td>"+goods.gprice+"</td>";
				sb += "<td>"+goods.ginfo+"</td>";
				sb += "<td><img src="+goods.gpath+" /></td>";
				sb += "<td><ul class=\"pager\"><li>"
								+"<a href=\"javascript:\" >购买</a>&nbsp;"
								+"<a href=\"javascript:\" >修改</a>&nbsp;"
								+"<a href=\"javascript:delGoods("+goods.gid+") \" onclick=\"return confirm('你确定要删除？')\" >删除</a>"
								+"</li></ul></td>"; 
				sb += "</tr>";
			});
			sb += "</table>";
			$("#content").html(sb);
			$("#maxPage").html(maxPage);
			$("#pid").html(pageIndex);
		})
	}

	$(function(){
		myload();
	})
</script>
</html>