JavaWEB(AJAX实现分页)

阅读 62

2022-05-03

一.编写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>
 

精彩评论(0)

0 0 举报