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