javaweb-23（AJAX实现分页）

 

目录

 一.编写Srvlet

二.利用AJAX实现后台分页

---

 一.编写Srvlet

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();
	}

 

二.利用AJAX实现后台分页

<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>