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是用的以前的（已經實現的）