1 admin/order/list.jsp代码
<%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <HTML> <HEAD> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="${pageContext.request.contextPath}/css/Style1.css" rel="stylesheet" type="text/css" /> <script language="javascript" src="${pageContext.request.contextPath}/js/public.js"></script> <!-- 弹出层插件 --> <link href="${pageContext.request.contextPath}/css/popup_layer.css" type="text/css" rel="stylesheet"/> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/popup_layer.js"></script> <!-- 调用插件弹出层的方法 --> <script type="text/javascript"> $(function(){ //弹出层插件调用 new PopupLayer({ trigger:".clickedElement", //触发点 点击谁弹出这个div popupBlk:"#showDiv", //弹出哪个div closeBtn:"#closeBtn", //关闭按钮 useOverlay:true }); }); // 点击按钮查询订单的详情 function findOrderInfoByOid(oid){ //清理上一次显示的内容 $("#showDivTab").html(""); //订单编号 $("#shodDivOid").html(""); //显示加载图片 $("#loading").css("display","block"); //ajax异步访问数据 $.post( "${pageContext.request.contextPath}/admin?method=findOrderInfoByOid", {"oid":oid}, function(data){ //隐藏加载图片 $("#loading").css("display","none"); /* * [ * {"shop_price":5999.0,"count":2,"pname":"微星（MSI）GE62 2QC-264XCN","pimage":"products/1/c_0042.jpg","subtotal":11998.0}, * {"shop_price":1299.0,"count":1,"pname":"小米 4c 标准版","pimage":"products/1/c_0001.jpg","subtotal":1299.0},{"shop_price":2699.0,"count":6,"pname":"中兴 AXON","pimage":"products/1/c_0002.jpg","subtotal":16194.0}, * {"shop_price":2298.0,"count":1,"pname":"vivo X5Pro","pimage":"products/1/c_0014.jpg","subtotal":2298.0}] */ var content="<tr id='showTableTitle'><th width='20%'>图片</th><th width='25%'>商品</th><th width='20%'>价格</th><th width='15%'>数量</th><th width='20%'>小计</th></tr>"; for(var i=0;i<data.length;++i){ content+="<tr style='text-align: center;'>"+ "<td>"+ "<img src='${pageContext.request.contextPath }/"+data[i].pimage+"' width='70' height='60'>"+ "</td>"+ "<td>"+ "<a target='_blank'>"+data[i].pname+"</a>"+ "</td>"+ "<td>"+data[i].shop_price+"</td>"+ "<td>"+data[i].count+"</td>"+ "<td><span class='subtotal'>"+data[i].subtotal+"</span></td>"+ "</tr>"; } $("#showDivTab").html(content); //订单编号 $("#shodDivOid").html(oid); }, "json" ); } </script> </HEAD> <body> <form id="Form1" name="Form1" action="${pageContext.request.contextPath}/user/list.jsp" method="post"> <table cellSpacing="1" cellPadding="0" width="100%" align="center" bgColor="#f5fafe" border="0"> <TBODY> <tr> <td class="ta_01" align="center" bgColor="#afd1f3"> <strong>订单列表</strong> </TD> </tr> <tr> <td class="ta_01" align="center" bgColor="#f5fafe"> <table cellspacing="0" cellpadding="1" rules="all" bordercolor="gray" border="1" id="DataGrid1" style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: 100%; WORD-BREAK: break-all; BORDER-BOTTOM: gray 1px solid; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #f5fafe; WORD-WRAP: break-word"> <tr style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; HEIGHT: 25px; BACKGROUND-COLOR: #afd1f3"> <td align="center" width="10%"> 序号 </td> <td align="center" width="10%"> 订单编号 </td> <td align="center" width="10%"> 订单金额 </td> <td align="center" width="10%"> 收货人 </td> <td align="center" width="10%"> 订单状态 </td> <td align="center" width="50%"> 订单详情 </td> </tr> <c:forEach items="${orderList }" var="order" varStatus="vs"> <tr onmouseover="this.style.backgroundColor = 'white'" onmouseout="this.style.backgroundColor = '#F5FAFE';"> <td style="CURSOR: hand; HEIGHT: 22px" align="center" width="18%"> ${vs.count } </td> <td style="CURSOR: hand; HEIGHT: 22px" align="center" width="17%"> ${order.oid } </td> <td style="CURSOR: hand; HEIGHT: 22px" align="center" width="17%"> ${order.total } </td> <td style="CURSOR: hand; HEIGHT: 22px" align="center" width="17%"> ${order.name } </td> <td style="CURSOR: hand; HEIGHT: 22px" align="center" width="17%"> ${order.state==1?"已付款":"未付款" } </td> <td align="center" style="HEIGHT: 22px"> <input type="button" value="订单详情" class="clickedElement" onclick="findOrderInfoByOid('${order.oid}')"/> </td> </tr> </c:forEach> </table> </td> </tr> </TBODY> </table> </form> <!-- 弹出层 HaoHao added --> <div id="showDiv" class="blk" style="display:none;"> <div class="main"> <h2>订单编号：<span id="shodDivOid" style="font-size: 13px;color: #999">123456789</span></h2> <a href="javascript:void(0);" id="closeBtn" class="closeBtn">关闭</a> <div id="loading" style="padding-top:30px;text-align: center;"> <img alt="" src="${pageContext.request.contextPath }/images/loading4.gif" height="100px" width="100px"> </div> <div style="padding:20px;"> <table id="showDivTab" style="100%"> <!-- <tr id='showTableTitle'> <th width='20%'>图片</th> <th width='25%'>商品</th> <th width='20%'>价格</th> <th width='15%'>数量</th> <th width='20%'>小计</th> </tr> --> <%-- <tr style='text-align: center;'> <td> <img src='${pageContext.request.contextPath }/products/1/c_0014' width='70' height='60'> </td> <td><a target='_blank'>电视机</a></td> <td>￥3000</td> <td>3</td> <td><span class='subtotal'>￥9000</span></td> </tr> --%> </table> </div> </div> </div> </body> </HTML>
2 AdminServlet-findOrderInfoByOid代码
// 6根据订单oid查询订单项和商品信息 findOrderInfoByOid public void findOrderInfoByOid(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //模拟从服务器读数据有一个延迟的效果 try { Thread.sleep(5000); } catch (InterruptedException e1) { e1.printStackTrace(); } //获得oid String oid = request.getParameter("oid"); AdminService service = new AdminService(); List<Map<String,Object>> mapList = null; try { mapList = service.findOrderInfoByOid(oid); } catch (SQLException e) { e.printStackTrace(); } //格式转换 Gson gson = new Gson(); String json = gson.toJson(mapList); //注意ajax提交回写 System.out.println(json); /* * [ * {"shop_price":5999.0,"count":2,"pname":"微星（MSI）GE62 2QC-264XCN","pimage":"products/1/c_0042.jpg","subtotal":11998.0}, * {"shop_price":1299.0,"count":1,"pname":"小米 4c 标准版","pimage":"products/1/c_0001.jpg","subtotal":1299.0},{"shop_price":2699.0,"count":6,"pname":"中兴 AXON","pimage":"products/1/c_0002.jpg","subtotal":16194.0}, * {"shop_price":2298.0,"count":1,"pname":"vivo X5Pro","pimage":"products/1/c_0014.jpg","subtotal":2298.0}] */ response.setContentType("text/html;charset=UTF-8"); response.getWriter().write(json); }
3 AdminService层代码
//查询订单详情 public List<Map<String, Object>> findOrderInfoByOid(String oid) throws SQLException { AdminDao dao = new AdminDao(); return dao.findOrderInfoByOid(oid); }
4 AdminDao代码
//查询订单详情 public List<Map<String, Object>> findOrderInfoByOid(String oid) throws SQLException { QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource()); String sql ="select p.pimage,p.pname,p.shop_price,i.count,i.subtotal " + " from orderitem i,product p " + " where i.pid=p.pid and i.oid=? "; return qr.query(sql, new MapListHandler(),oid); }
5 注意
1 后台查询延时的模拟
2 弹出层的原理