图书购买系统之本地添加购物车(完善版)--实现生成订单和子订单

本文详细介绍了从实现购物车页面、JS交互,到订单提交成功页面的全过程,包括订单和子订单的生成。涉及到的组件包括Ajax检查登录状态、插入订单项等功能,并在用户未登录时引导登录。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.实现效果图


2.cart.jsp购物车页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>cart</title>
		<!--引入bootstrap.css-->
		<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/bootstrap/css/bootstrap.css"/>
		<!--引入myscss.css-->
		<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/myscss.css" />
		<!--bootstrapValidator.css-->
		<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/bootstrapvalidate/css/bootstrapValidator.css" />
		<!--引入jquery.js-->
		<script type="text/javascript" src="<%=request.getContextPath()%>/bootstrap/js/jquery-3.1.1.js"></script>
		<!--bootstrap.js-->
		<script type="text/javascript" src="<%=request.getContextPath()%>/bootstrap/js/bootstrap.js"></script>
		<!--cart.js-->
		<script type="text/javascript" src="<%=request.getContextPath()%>/foreground/cart/cart.js"></script>
		<!--bootstrapValidator.js-->
		<script type="text/javascript" src="<%=request.getContextPath()%>/bootstrapvalidate/js/bootstrapValidator.js"></script>
		<!--contextPath-->
		<script type="text/JavaScript">
			var contextPath = "${pageContext.request.contextPath}";
		</script>
		
	</head>
	<body>
		<!--公用头部-->
		<!-- <div id="navhead"></div> -->
		<%@include file="/foreground/common/head.jsp"%>
		<!--主体部分-->
		<div class="container">
			<div class="row">
				<div class="col-md-1"></div>
				<div class="col-md-10">
					<!--content头部图片-->
					<img src="<%=request.getContextPath()%>/img/otherimages/buy1.gif" />
					<!--content中的table-->
					<div class="panel panel-info margintop">
					  	<div class="panel-heading text-center"><h4><strong>购物车列表</strong></h4></div>
					  	<div id="cartable">
					    	<!--<table class="table text-center">
								<tr class="danger">
									<th class="text-center">序号</th>
									<th class="text-center">商品名称</th>
									<th class="text-center">价格</th>
									<th class="text-center">购买数量</th>
									<th class="text-center">库存</th>
									<th class="text-center">小计</th>
								</tr>
								<tr>
									<td>0</td>
									<td>Java模式</td>
									<td>21.5</td>
									<td><a class='glyphicon glyphicon-minus-sign' οnclick='subBuyNum(this)'></a>1<a class='glyphicon glyphicon-plus-sign' οnclick='addBuyNum(this)'></a></td>
									<td>100</td>
									<td>21.5</td>
								</tr>
								<tr>
									<td>1</td>
									<td>JavaScript</td>
									<td>18.5</td>
									<td>1</td>
									<td>100</td>
									<td>18.5</td>
								</tr>
							</table>-->
					  	</div>
						<div class="panel-footer clearfix"><span id="totalprice" class="pull-right">总计</span></div>
					</div>
					<form id="orderform" class="form-horizontal">
					  	<div class="form-group">
					    	<label for="receiverAddress" class="col-md-1 control-label">地址</label>
					    	<div class="col-md-4">
					      		<input type="text" class="form-control" name="receiverAddress" id="receiverAddress" placeholder="请输入收货地址">
					    	</div>
					  	</div>
					  	<div class="form-group">
					    	<label for="receiverName" class="col-md-1 control-label">收货人</label>
					    	<div class="col-md-4">
					      		<input type="text" class="form-control" id="receiverName" name="receiverName" placeholder="请输入收货人姓名">
					    	</div>
					  	</div>
					  	<div class="form-group">
					    	<label for="receiverPhone" class="col-md-1 control-label">电话</label>
					    	<div class="col-md-4">
					      		<input type="text" class="form-control" id="receiverPhone" name="receiverPhone" placeholder="请输入收货人电话">
					    	</div>
					  	</div>
					  	<div class="form-group">
					    	<div class="col-md-12 text-right">
					      		<a href="<%=request.getContextPath()%>/foreground/book/home.jsp">
					      			<input type="button" value="" style="background:url('<%=request.getContextPath()%>/img/otherimages/gwc_jx.gif') no-repeat;width:130px;height:45px;border:0px"/>
					      		</a>
					      		<a href="<%=request.getContextPath()%>/foreground/user/user.jsp">
					      			<input type="submit" id="submitform" value="" style="background:url('<%
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值