目录
一、导入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>
JavaWEB快速入门之AJAX实现分页
于 2022-04-28 20:07:23 首次发布