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"><trstyle="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="width: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();}//获得oidString 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 弹出层的原理

转载于:https://www.cnblogs.com/jepson6669/p/8483097.html

案例39-后台查询订单详情代码实现相关推荐

【API接口大全】查询订单详情/物流信息/交易订单
淘宝官方商品详情.交易订单.订单详情.物流信息查询接口.适用于淘宝开放平台,可方便接入如订单同步.商品管理.插旗备注等API接口能力.现在我把整理好的订单商品接口分享给大家: 1.订单接口列表 buy ...
Java Web 网络商城案例演示十五订单详情功能（提交订单支付界面）
订单详情功能(提交订单支付界面) 原理分析步骤实现: 1.准备工作:order_list.jsp当中修改链接提交当前订单编号 <a href="${pageContext.requ ...
Java Web 网络商城案例演示十六订单详情功能（支付功能的实现使用易付宝）
sValue.append(p3_Amt); // 交易币种 sValue.append(p4_Cur); // 商品名称 sValue.append(p5_Pid); // 商品种类 sValue. ...
（二十二）查询订单的详情
(二十二)查询订单的详情案例2-查询订单的详情需求:只有未付款的订单,点击"付款",跳转到订单的详情页面步骤分析:1.在订单列表,点击付款,/store/order?meth ...
JAVA项目实战开发电商项目案例（十）订单与支付模块
文章目录 1项目架构 2项目采用技术 3订单与支付模块功能演示 4如何开发支付宝的支付模块以及订单模块 4.1首先需要编写前端页面以及JS文件 4.2其次需要编写JAVA后台接口 4.3支付模块分析 ...
mysql结算订单表到用户_Luffy之结算订单页面(订单模型表的创建,订单的生成,以及订单详情展示等)...
订单页面在前面我们已经构建了,购物车的页面,接下来到了结算页面 1.首先,在购物车页面点击去结算按钮时,我们需要做如下动作 .前端发送生成订单的请求,点击标签内触发事件 create_order t ...
java连接销售订单查询_（三十一）订单管理-查询订单
查询订单: 所有的订单不区分用户基本的sql select* from orders where 1=1判断是否有state 若有则添加state 最后order by ordertime des ...
SpringBoot 微信点餐系统学习记录六-订单表和订单详情表的后端开发
在dataobject文件夹创建订单表和订单详情表的实体类 package com.imooc.dataobject;import com.imooc.enums.OrderStatusEnum; i ...
java微信支付v3系列——6.微信支付查询订单API
目录 java微信支付v3系列--1.微信支付准备工作 java微信支付v3系列--2.微信支付基本配置 java微信支付v3系列--3.订单创建准备操作 java微信支付v3系列--4.创建订单的封 ...

案例39-后台查询订单详情代码实现

1 admin/order/list.jsp代码

2 AdminServlet-findOrderInfoByOid代码

3 AdminService层代码

4 AdminDao代码

5 注意

案例39-后台查询订单详情代码实现相关推荐

最新文章

热门文章