本文章基於JSP練習（cookie、隱藏域使用等） ，對部分頁面進行改寫。
購物車頁面的改寫
// 購物車頁面，僅body標籤部分
<body>
<%@include file="/jsp/notNullCharge.jsp" %>
<div class="container">
<div class="row">
<div class="span12">
<h3>
尊貴的會員：${sessionScope.loginUser.uname}
</h3>
<ul class="nav nav-tabs">
<li class="active">
<a href="#">購物車</a>
</li>
</ul>
<table class="table table-striped">
<thead>
<tr>
<th>商品名稱</th>
<th>商品價格</th>
<th>商品圖片</th>
<th>商品描述</th>
<th>商品數量</th>
<th>小計</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${CartProd}" var="product">
<tr>
<td>${product.pname}</td>
<td>${product.price}</td>
<td><img src="${pageContext.request.contextPath}/${product.pimg}"></td>
<td>${product.pdesc}</td>
<td><input type="button" value="-" class="mybtn1"
<c:if test="${product.pnum==1}" var="flag" scope="page">
disabled
</c:if>
>
<input type="text" class="prodNum" value="${product.pnum}" readonly cookieKey="prod_${product.pid}">
<input type="button" value="+" class="mybtn2">
</td>
<c:set var="count" value="${product.price.multiply(product.pnum)}" scope="page"/>
<c:set var="totalPay" value="${count+totalPay}" scope="page" />
<td>${count}</td>
<td><input type="button" class="btn btn-primary deleteProd" value="刪除"
cookieKey="prod_${product.pid}" cookieVal="${product.pnum}">
</td>
</tr>
</c:forEach>
<tr class="danger totalPay">
<td colspan="5">合計</td>
<td colspan="2">
${totalPay}
</td>
</tr>
</tbody>
</table>
<form action="${pageContext.request.contextPath}/PlaceOrderServlet" method="post">
<input id="totalPay" type="hidden" name="totalPay" value="${totalPay}"/>
<input class="btn btn-danger" type="submit" value="下單結算" />
</form>
</div>
</div>
</div>
</body>
訂單詳情頁改寫
- request.getParameter（）取值的EL寫法
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
- List<Map<String, Object>> 集合的JSTL遍歷方式
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>訂單詳情頁</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"
charset="utf-8"></script>
<style>
.mytr td img {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<%@include file="/jsp/notNullCharge.jsp" %>
<div class="container">
<div class="row">
<div class="span12">
<h3>
歡迎您：${sessionScope.loginUser.uname}
</h3>
<ul class="nav nav-tabs">
<li role="presentation">
<a href="${pageContext.request.contextPath}/QueryAllProductServlet">首頁</a>
</li>
<li role="presentation" class="active">
<a href="#">訂單詳情頁</a>
</li>
</ul>
<br>
<table class="table table-bordered">
<tr class="danger">
<th>訂單編號</th>
<th>付款賬戶</th>
<th>訂單總額</th>
<th>付款時間</th>
</tr>
<tr class="info">
<td>${param.get("oid")}
</td>
<td>${param.get("uname")}
</td>
<td>${param.get("osum")}
</td>
<td>${param.get("odate")}
</td>
</tr>
</table>
<table class="table table-striped">
<thead>
<tr class="danger">
<th>購買商品名稱</th>
<th>購買商品價格</th>
<th>購買商品圖片</th>
<th>購買商品數量</th>
</tr>
</thead>
<tbody>
<c:forEach items="${orderDetails}" var="map">
<tr class="mytr">
<td>${map.get("pname")} <%--pname是key值--%>
</td>
<td>${map.get("price")}
</td>
<td><img src="${pageContext.request.contextPath}/${map.get("pimg")}"/>
</td>
<td>${map.get("pnum")}
</td>
</tr>
</c:forEach>
</tbody>
</table>
<a class="btn btn-info" href="${pageContext.request.contextPath}/OrderServlet">返回上一級</a>
</div>
</div>
</div>
</body>
</html>