Java Web 网络商城案例演示二十三 管理员界面异步显示订单详情
思路
1、将当前的功能要实现的最终效果先实现静态的效果
order/list.jsp
<table border="1" width="100%">
<tr>
<th>商品</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
</tr>
<tr>
<td><img src="/store_v5/products/1/c_0001.jpg" width="50px"></td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
</table>
2、 用户在点击详情按钮的时候，要向服务端发起ajax请求，向服务端传递订单的ID，
3、服务端获取到订单的ID，查询 这个订单下所有的订单项以及订单项对应的商品信息，返回集合
4、
5、调试，排除2端错误
6、在客 户端获取到服务端响应回的JSON格式的数据，将这些数据绑定在页面上
order/list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
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>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
</HEAD>
<body>
<br>
<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="5%">序号</td>
<td align="center" width="20%">订单编号</td>
<td align="center" width="5%">订单金额</td>
<td align="center" width="5%">收货人</td>
<td align="center" width="5%">订单状态</td>
<td align="center" width="60%">订单详情</td>
</tr>
<c:forEach items="${allOrders }" var="o" varStatus="status">
<tr onmouseover="this.style.backgroundColor = 'white'"
onmouseout="this.style.backgroundColor = '#F5FAFE';">
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="5%">${status.count }</td>
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="20%">${o.oid }</td>
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="5%">${o.total }</td>
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="5%">${o.name }</td>
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="5%"><c:if test="${o.state==1 }">未付款</c:if> <c:if
test="${o.state==2 }">
<a href="">发货</a>
</c:if> <c:if test="${o.state==3 }">已发货</c:if> <c:if
test="${o.state==4 }">订单完成</c:if></td>
<td align="center" style="HEIGHT: 22px" width="60%">
<input type="button" value="订单详情" id="${o.oid}" class="myClass"/>
<table border="1" width="100%">
<!-- <tr>
<th>商品</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
</tr>
<tr><td><img src="/store_v5/products/1/c_0001.jpg" width="50px"></td><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr> -->
</table>
</td>
</tr>
</c:forEach>
</table>
</td>
</tr>
<tr align="center">
<td colspan="7"></td>
</tr>
</TBODY>
</table>
</form>
</body>
<script type="text/javascript">
$(function(){
//页面加载完毕之后，获取样式名称为myClass一批元素，为其绑定点击事件
$(".myClass").click(function(){
//获取当前myClass的id="${o.oid}" 订单的ID
var id = this.id;
//获取当前myClass按钮的文字
var txt = this.value;
//获取到当前元素的下一个对象table
var $tb=$(this).next();
if(txt=="订单详情"){
//向服务端发送Ajax请求，将当前订单的ID传递到服务端
var url="/store_v5/AdminOrderServlet";
var obj = {"method":"findOrderByOidWithAjax","id":id};
$.post(url,obj,function(data){
//var $tb=$(this).next(); //此处坑爹,错误的写法
//alert(data);
//清除内容
$tb.html("");
var th="<tr><th>商品</th><th>名称</th><th>单价</th><th>数量</th></tr>";
$tb.append(th);
//利用JQUERY遍历响应到客户端的数据
$.each(data,function(i,obj){
var td="<tr><td><img src='/store_v5/"+obj.product.pimage+"' width='50px'/></td><td>"+obj.product.pname+"</td><td>"+obj.product.shop_price+"</td><td>"+obj.quantity+"</td></tr>";
$tb.append(td);
})
},"json");
//变换按钮的文字、
this.value="关闭";
/* $.post(发送请求的路径,方法以及携带的数值,返回的参数,"返回参数的格式"); */
}else{
//变换按钮的文字、
this.value="订单详情";
//清空表格的内容
$tb.html("");
}
});
});
</script>
</HTML>
AdminOrderServlet
// findOrderByOidWithAjax
public String findOrderByOidWithAjax(HttpServletRequest request, HttpServletResponse response) throws Exception {
// 服务端获取到订单的ID，
String oid = request.getParameter("id");
// 查询 这个订单下所有的订单项以及订单项对应的商品信息，返回集合
OrderService orderService = new OrderServiceImpl();
Order order = orderService.findOrderByOid(oid);
// 将返回的集合转换为JSON格式的字符串，
String jsonStr = JSONArray.fromObject(order.getList()).toString();
//响应到客户端
response.setContentType("application/json;charset=utf-8");//设置响应数据的格式
response.getWriter().println(jsonStr);//将json格栅灯数据发送到客户端
return null;
}
修改订单状态
原理分析
步骤实现
1、准备工作：
admin/order/list.jsp
<a href="/store_v5/AdminOrderServlet?method=updateOrderByOid&oid=${o.oid }">发货</a>
2、AdminOrderServlet–>updateOrderByOid方法当中、
// updateOrderByOid
public String updateOrderByOid(HttpServletRequest request, HttpServletResponse response) throws Exception {
// 获取订单的id
String oid = request.getParameter("oid");
// 根据订单的id查询订单
OrderService orderService = new OrderServiceImpl();
Order order = orderService.findOrderByOid(oid);
// 设置订单的状态
order.setState(3);
// 修改数据库当中的订单信息
orderService.updateOrder(order);
// 从新定向到到查询已发货订单
response.sendRedirect("/store_v5/AdminOrderServlet?method=findOrders&state=3");
return null;
}
3、service dao是用的以前的（已经实现的）
原创文章 76
获赞 151
访问量 1万+