JavaWEB快速入门之AJAX实现分页

ning_ning_03

已于 2022-04-28 20:25:22 修改

阅读量2.6k

点赞数 1

文章标签： ajax javascript ecmascript web tomcat

于 2022-04-28 20:07:23 首次发布

本文链接：https://blog.csdn.net/m0_67768699/article/details/124480699

版权

（4）引入jQuery库，利用AJAX技术实现分页

一、导入Ajax实现分页所需的jar包

（1） jackson需导入三个包

jackson-annotations-2.2.3.jar

jackson-core-2.2.3.jar

jackson-databind-2.2.3.jar

（2）oracle数据库需导入一个包

ojdbc14.jar

二、AJAX实现分页

——用三层架构+MVC模式搭建环境

（1）第一步：编写方法

编写携带模糊查询分页的方法和携带模糊查询的总记录数的方法

@Override
	public List<Goods> queryGoodsAll(int pageIndex, int pageSize, String strName) {
		int start = (pageIndex - 1) * pageSize + 1;
		int end = pageIndex * pageSize;
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		String sql = "";
		List<Goods> list = new ArrayList<Goods>();
		Goods goods = null;
		try {
			conn = DBHelper.getConn();
			sql ="select b.* from(select a.*,rownum as rid from( select * from mvc_good where gname like '%"+strName+"%')a)b where b.rid between "+start+" and "+end+"";
			ps = conn.prepareStatement(sql);
			rs = ps.executeQuery();
			while(rs.next()) {
				goods = new Goods(rs.getInt(1), rs.getString(2), rs.getFloat(3),rs.getInt(4), rs.getString(5), rs.getString(6));
				list.add(goods);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			DBHelper.myClose(conn, ps, rs);
			
		}
		return list;
	}
	
	@Override
	public int getGoodsCount(String strName) {
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		int count = 0;// 保存表的总记录数
		try {
			conn = DBHelper.getConn();
			String sql = "select count(*) from mvc_good where gname like '%"+strName+"%'";
			ps = conn.prepareStatement(sql);
			rs = ps.executeQuery();
			if (rs.next()) {
				count = rs.getInt(1);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.myClose(conn, ps, rs);
		}
		return count;
	}

（2）编写HTML代码

页面简单布局

<body>
	<h1 style="text-align: center">糯米团子的购物商城</h1>
	<hr>
	<div style="text-align: center">
		名称：<input id="strName" type="text" name="strName">
		<button id="searchBtn" class="btn btn-default">搜索</button>
	</div>
	<br>
	<div id="content"></div>
	<div>
		<span id="start"></span>/<span id="end"></span> <a href="">首页</a> <a
			href="">上一页</a> <a href="javascript:nextBtn();">下一页</a> <a href="">尾页</a>
	</div>
</body>

（3）编写servlet

实例化biz层调用方法，与数据库进行交互，并将数据保存在Map集合中，再通过jackson工具将数据通过流传递出去

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");

		//实例化
	       IGoodsBiz igb = new GoodsBizImpl();
			//定义变量存储页码以及每一夜显示的数据
			int pageIndex = 1;
			int pageSize = 4;
			int pageMax = 0;//存储最大页码
			//当点击分页区域的下一页超链接时，获取这个参数
			String pIndex = request.getParameter("pageIndex");
			//判断，只有你点击了下一页  才将pIndex赋值给pageIndex
			if (null != pIndex) {
				pageIndex = Integer.valueOf(pIndex);
			}
			String strName = request.getParameter("strName");
			if (strName == null) {
				strName = "";
			}
			//根据dao求出总记录数
			int count = igb.getGoodsCount(strName);
			pageMax = count % pageSize == 0 ? count / pageSize : count / pageSize + 1;
	        List<Goods> listGoods = igb.queryGoodsAll(pageIndex, pageSize, strName);
	         
	        PrintWriter out = response.getWriter();// 获取输出对象
	        
	    	Map<String, Object> maps = new HashMap<String, Object>();// 创建了集合
			maps.put("listGoods", listGoods);
			maps.put("pageIndex", pageIndex);
	        
	        ObjectMapper mapper = new ObjectMapper();
	        
	        String writeValueAsString = mapper.writeValueAsString(maps);
	        
			out.write(writeValueAsString);	
			
			out.flush();
			out.close();
	}

（4）引入jQuery库，利用AJAX技术实现分页

对模糊查询的非空做出判断，利用jackson获取servlet里保存的数据，再通过拼接表格显示数据，并为下一页设立点击事件实现分页

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
let pageIndex = 1;
let path = "${pageContext.request.servletContext.contextPath}";
    $(function(){
    	myload("");
    	
    	$("#searchBtn").click(function(){		
    		let searchName = $("#strName").val();
    		if(!searchName){
    			alert("请输入关键词瘦素");
    			return;
    		}
    		myload("searchName");      	
    	}) 	   	
    })
     function myload(strName){ 	 
    	 $.post(path+"/adminIndex.do",{"pageIndex":pageIndex,"strName":strName},function(msg){ 		
   		 let map =$.parseJSON(msg);    		
    		 let str = "";
    		 str+="<table class='table table-bordered table-responsive' border='1' width='100%' cellpadding='0' cellspacing='0'>";
    		 str+="<tr class='list-group-item-danger'>";
    		 str+="<th>商品编号</th>";
    		 str+="<th>商品名称</th>";
    		 str+="<th>商品价格</th>";
    		 str+="<th>商品库存</th>";
    		 str+="<th>商品描述</th>";
    		 str+="<th>商品图片</th>";
    		 str+="<th>商品操作</th>";
    		 str+="</tr>";
    		 $.each(map.listGoods,function(index,object){
    			 str+="<tr>";
    			 str+="<td>"+object.gid+"</td>";
        		 str+="<td>"+object.gname+"</td>";
        		 str+="<td>"+object.gprice+"</td>";
        		 str+="<td>"+object.gstock+"</td>";
        		 str+="<td>"+object.ginfo+"</td>";
        		 str+="<td><img width='80' height='60' src ='"+object.gpath+"'></td>";
        		 str+="<td><button class='btn btn-default'>删除</button><button class='btn btn-default'>修改</button></td>";
    			 str+="</tr>";
    		 })
    		 str+="</table>"; 		
    		 $("#content").html(str);		 
    		 $("#start").html(pageIndex);
    		 $("#end").html(pageMax);
    	 });
     }   
	 function nextBtn(){
		if(pageIndex>=pageMax){
			 pageIndex=pageMax;
			 return;
		}else{
			pageIndex++;
		}
		 myload();
	 }
</script>

ning_ning_03

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaWEB快速入门之AJAX实现分页

一、导入Ajax实现分页所需的jar包（1）jackJSON需导入三个包 jackson-annotations-2.2.3.jar jackson-core-2.2.3.jar jackson-databind-2.2.3.jar （2）oracle数据库需导入一个包二、AJAX实现分页 ——用三层架构+MVC模式搭建环境（1）第一步：编写方法
复制链接

扫一扫