文章目录
购物车页面的改写订单详情页改写
本文章基于JSP练习(cookie、隐藏域使用等) ,对部分页面进行改写。
购物车页面的改写
<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
>