AJAX之无刷新分页

Gorgeous_Tang

于 2022-04-28 21:36:50 发布

阅读量1k

点赞数 1

文章标签： jquery javascript ecmascript

本文链接：https://blog.csdn.net/weixin_65479202/article/details/124483904

版权

准备导包+BuildPath

两个jar包---------放入lib文件夹中

JSON的jar包:fastjson-1.2.47.jar

jQuery的类库-------放入js文件夹中

jquery-3.3.1.js

实现效果

代码演示：

数据库帮助类

package com.zking.mvc.cart.utils;

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

/**
 * 数据库帮助类
 * 
 * @author Administrator
 *
 */
public class DBHelper {
	static {
		try {
			// OracleDriver
			Class.forName("oracle.jdbc.driver.OracleDriver");
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	/**
	 * 获取数据库连接
	 * 
	 * @return
	 */
	public static Connection getConn() {
		Connection conn = null;
		try {
			conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orcl", "scott", "123");
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return conn;
	}

	/**
	 * 关闭服务
	 * 
	 * @param conn
	 * @param ps
	 * @param rs
	 */
	public static void myClose(Connection conn, PreparedStatement ps, ResultSet rs) {
		try {
			if (conn != null && !conn.isClosed()) {
				conn.close();
			}
			if (ps != null) {
				ps.close();
			}
			if (rs != null) {
				rs.close();
			}
		} catch (Exception e) {
			e.printStackTrace();
		}

	}

}

实体：

package com.zking.mvc.cart.entity;

import java.io.Serializable;

/**
 * 商品实体类
 * 
 * @author zjjt
 *
 */

public class Goods implements Serializable {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	private Integer gid;
	private String gname;
	private String gtype;
	private String gimage;
	private Integer gprice;
	private Integer gkc;
	private String ginfo;

	public Goods() {
		// TODO Auto-generated constructor stub
	}

	public Goods(Integer gid, String gname, String gtype, String gimage, Integer gprice, Integer gkc, String ginfo) {
		super();
		this.gid = gid;
		this.gname = gname;
		this.gtype = gtype;
		this.gimage = gimage;
		this.gprice = gprice;
		this.gkc = gkc;
		this.ginfo = ginfo;
	}

	public Goods(String gname, String gtype, String gimage, Integer gprice, Integer gkc, String ginfo) {
		super();
		this.gname = gname;
		this.gtype = gtype;
		this.gimage = gimage;
		this.gprice = gprice;
		this.gkc = gkc;
		this.ginfo = ginfo;
	}

	public Integer getGid() {
		return gid;
	}

	public void setGid(Integer gid) {
		this.gid = gid;
	}

	public String getGname() {
		return gname;
	}

	public void setGname(String gname) {
		this.gname = gname;
	}

	public String getGtype() {
		return gtype;
	}

	public void setGtype(String gtype) {
		this.gtype = gtype;
	}

	public String getGimage() {
		return gimage;
	}

	public void setGimage(String gimage) {
		this.gimage = gimage;
	}

	public Integer getGprice() {
		return gprice;
	}

	public void setGprice(Integer gprice) {
		this.gprice = gprice;
	}

	public Integer getGkc() {
		return gkc;
	}

	public void setGkc(Integer gkc) {
		this.gkc = gkc;
	}

	public String getGinfo() {
		return ginfo;
	}

	public void setGinfo(String ginfo) {
		this.ginfo = ginfo;
	}

	@Override
	public String toString() {
		return "Goods [gid=" + gid + ", gname=" + gname + ", gtype=" + gtype + ", gimage=" + gimage + ", gprice="
				+ gprice + ", gkc=" + gkc + ", ginfo=" + ginfo + "]";
	}

}

数据访问层

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.dao.IOrderDao;
import com.zking.mvc.cart.entity.Order;
import com.zking.mvc.cart.utils.DBHelper;

public class OrderDaoImpl implements IOrderDao {

	@Override
	public int getMaxId() {
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		try {
			conn = DBHelper.getConn();
			String sql = "select nvl(max(oid),0)+1 from m_order ";
			ps = conn.prepareStatement(sql);
			rs = ps.executeQuery();
			if (rs.next()) {
				return rs.getInt(1);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.myClose(conn, ps, rs);
		}

		return 0;
	}

	@Override
	public int addOrder(Order order) {
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		try {
			con = DBHelper.getConn();
			String sql = "insert into m_order values(?,?,?,?)";
			ps = con.prepareStatement(sql);
			ps.setInt(1, order.getOid());
			ps.setString(2, order.getOaddress());
			ps.setDouble(3, order.getOsumprice());
			ps.setInt(4, order.getUuid());
			return ps.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.myClose(con, ps, rs);
		}
		return 0;
	}

	@Override
	public List<Order> getOrderAllById(int uuid) {
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		List<Order> list = new ArrayList<Order>();
		try {
			con = DBHelper.getConn();
			String sql = "select * from m_order where uuid=?";
			ps = con.prepareStatement(sql);
			ps.setInt(1, uuid);
			rs = ps.executeQuery();
			while (rs.next()) {
				Order o = new Order();
				o.setOid(rs.getInt(1));
				o.setOaddress(rs.getString(2));
				o.setOsumprice(rs.getInt(3));
				o.setUuid(rs.getInt(4));
				list.add(o);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.myClose(con, ps, rs);
		}
		return list;
	}

	public static void main(String[] args) {
		IOrderDao iod = new OrderDaoImpl();
		System.out.println(iod.getMaxId());
		System.out.println(iod.getOrderAllById(1));
	}

}

业务逻辑逻辑层

package com.zking.mvc.cart.biz;

import java.util.List;

import com.zking.mvc.cart.entity.Goods;

public interface IGoodsBiz {

	/**
	 * 显示所有商品信息
	 * 
	 * @return
	 */
	List<Goods> queryGoodsAll();

	/**
	 * 根据商品编号获取商品信息
	 * 
	 * @param gid
	 * @return
	 */
	Goods getGoodsByGid(Integer gid);

}

主界面实现

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>商品首页</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
body {
	padding: 20px 40px;
}

ul {
	border: 10px solid red;
}

img {
	width: 80px;
	height: 60px;
}
</style>

</head>
<body>
	<c:if test="${empty all }">
		<jsp:forward page="goodslist.do"></jsp:forward>
	</c:if>

	<h1>
		欢迎回来！！！ <small>这是首页</small>
	</h1>

	<div style="height: 100">

		<input id="i1">

	</div>
	<ul>
		<li><a>模拟数据</a></li>
	</ul>

	<h1>
		<button class="btn btn-primary" onclick="location.href='cart.jsp'">点我去购物车🛒</button>
	</h1>
	<table class="table table-bordered table-striped">
		<tr>
			<th>商品编号</th>
			<th>商品名称</th>
			<th>商品类型</th>
			<th>商品图片</th>
			<th>商品价格</th>
			<th>商品库存</th>
			<th>商品信息</th>
		</tr>

		<c:forEach items="${all}" var="goods">
			<tr>
				<td>${ goods.gid }</td>
				<td>${ goods.gname }</td>
				<td>${ goods.gtype }</td>
				<td><img src="${goods.gimage }" /></td>
				<td>${ goods.gprice }</td>
				<td>${ goods.gkc}</td>
				<td>${ goods.ginfo }</td>
				<td><button
						onclick="location.href='${pageContext.request.contextPath }/AddCartServlet?gid=${ goods.gid }'"
						class="btn btn-default">加入🚗</button></td>
			</tr>
		</c:forEach>
	</table>
	<script>
		//onkeydown 键盘按下
		//onkeyup 键盘松开
		$(i1).keyup(function(){
			$.post("search.do",{
				a:$(i1).val()
			},function(obj){
				//1.清空ul的数据
				$("ul").empty();
				for(var i of obj){//遍历集合
					$("ul").append('<li><a>'+i.gname+'</a></li>')
				}
			},"json")
		})
	
	</script>
</body>
</html>