复制代码代码如下:
<%@ idioma de la página="java" contentType="text/html; charset=utf-8"
páginaEncoding="utf-8"%>
<%
Ruta de cadena = request.getContextPath();
Cadena basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ ruta + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transicional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<cabeza>
<meta content="ancho=ancho del dispositivo, escala-inicial=1.0, escala-máxima=1.0, escalable por el usuario=no" nombre="ventana gráfica">
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<título>购物车</título>
<tipo de estilo="texto/css">
cuerpo{
antecedentes: #fefbe6;
alineación de texto: centro;
margen: 0;
relleno: 0;
color: #500f60;
}
li{
tipo de estilo de lista: ninguno;
}
a:enlace{
tipo de estilo de lista: ninguno;
}
img{
ancho: 100%;
altura: 120 píxeles;
}
#estático{
margen: 0 automático;
alineación de texto: izquierda;
}
#principal{
ancho: 100%;
margen: 0 automático;
color: #530a4a;
posición: absoluta;
arriba: 110px;
}
#ul principal{
}
# principal ul li {
ancho: 20%;
flotador: izquierda;
}
#principal_t{
posición: absoluta;
arriba: 140px;
color: #530a4a;
ancho: 100%;
margen: 0;
relleno: 0;
tamaño de fuente: 0,8 em;
}
#main_t_l,#main_t_a{
color: #3f1262;
ancho: 100%;
tamaño de fuente: 0,8 em;
}
#main_t_l ul li{
ancho: 20%;
flotador: izquierda;
}
#zon{
fondo: #dbfff1;
color: #f8cd66;
}
.bot_in{
antecedentes: #f1fcc4;
borde: 3px #f1fcc4 sólido;
radio del borde: 6px 6px 6px 6px;
-radio-borde-moz: 6px;
}
#ji{
ancho: 130 px;
altura: 30 píxeles;
filtro:alfa(opacidad=100 acabadoopacidad=50 estilo=1 iniciox=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=rojo,endcolorstr=azul,gradientType=0);
-ms-filter:alpha(opacidad=100 acabadoopacidad=50 estilo=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=rojo,endcolorstr=azul,gradientType= 0);/*IE8*/
fondo: rojo;
fondo:-moz-linear-gradient(arriba, rojo, rgba(0, 0, 255, 0.5));
fondo:-webkit-gradient(lineal, 0 0, 0 abajo, desde(#0dc613), hasta(rgba(111, 246, 116, 0.5)));
fondo:-o-lineal-gradiente(arriba, rojo, rgba(0, 0, 255, 0.5));
color: #fff;
margen superior: 6%;
borde: ninguno;
}
.ji {
ancho: 130 px;
altura: 30 píxeles;
filtro:alfa(opacidad=100 acabadoopacidad=50 estilo=1 iniciox=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=rojo,endcolorstr=azul,gradientType=0);
-ms-filter:alpha(opacidad=100 acabadoopacidad=50 estilo=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=rojo,endcolorstr=azul,gradientType= 0);/*IE8*/
fondo: rojo;
fondo:-moz-linear-gradient(arriba, rojo, rgba(0, 0, 255, 0.5));
fondo:-webkit-gradient(lineal, 0 0, 0 abajo, desde(#0dc613), hasta(rgba(111, 246, 116, 0.5)));
fondo:-o-lineal-gradiente(arriba, rojo, rgba(0, 0, 255, 0.5));
color: #fff;
margen superior: 6%;
borde: ninguno;
}
</estilo>
<tipo de script="texto/javascript">
$(función() {
//点击加号购物车数量增加1
$(".add").live("hacer clic",función(){
var esAdd = verdadero;
var num = parseInt($(this).closest("li").find("#num").text());
var productId = $(this).closest("li").find("#productId").val();
var precio total = parseFloat($("#preciototal").text());
var precio = parseFloat($(this).closest("ul").find("#price").text());
si (!isNaN(núm)) {
número++;
si (núm > 99) {
número = 99;
esAgregar = falso;
}
si(esAgregar) {
precio total = precio total + precio;
}
}
var total = núm * precio;
$(this).closest("li").find("#num").text(num);
$(this).closest("ul").find("#total").text(total);
$.post("<%=basePath%>updateShopCart.action","productId="+productId+"&num="+num,function(data){
si(datos.éxito==verdadero){
$("#preciototal").text(preciototal);
}
});
});
//点击加号购物车数量减少1
$(".delete").live("clic",función(){
var isReduce = verdadero;
var num = parseInt($(this).closest("li").find("#num").text());
var productId = $(this).closest("li").find("#productId").val();
var precio total = parseFloat($("#preciototal").text());
var precio = parseFloat($(this).closest("ul").find("#price").text());
si (!isNaN(núm)) {
número--;
si (núm < 1) {
número = 1;
esReducir = falso;
}
si(esReducir){
precio total = precio total - precio;
}
}
var total = núm * precio;
$(this).closest("li").find("#num").text(num);
$(this).closest("ul").find("#total").text(total);
$.post("<%=basePath%>updateShopCart.action","productId="+productId+"&num="+num,function(data){
si(datos.éxito==verdadero){
$("#preciototal").text(preciototal);
}
});
});
$("#cha").live("clic",función() {
var productId = $(this).closest("ul").find("#productId").val();
$.post("<%=basePath%>deleteFromShopCart.action","productId="+productId,function(datos){
si(datos.éxito==verdadero){
getCompraCarritoInfo();
}
});
});
función getShopCartInfo(){
$.ajax({
tipo: "POST",
URL: "<%=basePath%>findShopCart.action",
éxito: función (datos) {
var fila = "";
var lista = datos.lista;
$("#main_t_l").empty();
vartotal = 0;
if(lista!=null&&lista.longitud!=0){
for(var i=0;i<lista.longitud;i++){
total = total + lista[i].precio * lista[i].num;
fila = "<ul>"+
"<li style=/"ancho: 17%;text-align: center;/">"+lista[i].nombredelproducto+"</li>"+
"<li style=/"ancho: 17%;text-align: center;/" id=/"precio/">"+lista[i].precio+"￥</li>"+
"<li style=/"ancho: 30%;text-align: center;/">"+
"<tipo de entrada=/"oculto/" id=/"productId/" valor="+lista[i].id+">"+
"<estilo de botón=/"fondo: #dbddd4;borde-superior: ninguno;borde: 1px #dbddd4 sólido; radio-borde: 1px 1px 1px 1px;-moz-radio-borde: 1px;/" id=/"num/">"+list[i].num+"</button>"+
"<estilo de botón=/"fondo: #f5e3d5;borde superior: ninguno;borde: 1px #f5e3d5 sólido; radio-borde: 1px 1px 1px 1px; -radio-borde-moz: 1px; color: #c19268;/" class=/"eliminar/">-</button>"+
"<estilo de botón=/"fondo: #f5e3d5;borde superior: ninguno;borde: 1px #f5e3d5 sólido; radio-borde: 1px 1px 1px 1px; -radio-borde-moz: 1px; color: #c19268;/" class=/"add/">+</button>"+
"</li>"+
"<li style=/"width: 18%;text-align: center;/"><span id=/"total/">"+list[i].totalprice+"￥</span></li>" +
"<li style=/"ancho: 18%;text-align: center;/">"+
"<img src=/"<%=basePath%>image/cha.png/" style=/"ancho: 25px;alto: 25px/" id=/"cha/">"+
"</li>"+
"</ul>"+
"<hr size="3px;/" color=/"#c1c1c1/" style=/"width: 100%;/">";
$(row).appendTo($("#main_t_l"));
$("#preciototal").find("span").text(total);
}
}demás {
$("#main_t_l").append("<ul><li style=/"width: 100%;text-align: center;/">您的购物车为空,快去购物吧！</li> </ul>");
$("#preciototal").find("span").text(0);
}
}
});
}
//提交订单
$("#ji").hacer clic(función(){
var nombre = $("#nombre").val();
var tele = $("#tele").val();
var dirección = $("#dirección").val();
var precio total = $("#preciototal").find("span").text();
si(precio total == 0){
alert("购物车为空，不能提交订单!");
devolver;
}
si(nombre==""){
alerta("姓名不能为空!");
devolver;
}
si(tele==""){
alerta("电话不能为空!");
devolver;
}
si(dirección==""){
alerta("地址不能为空!");
devolver;
}
$("#ji").attr("disabled","disabled");
$("#ji").css("fondo","#808080");
document.getElementById("bgDiv").style.visibility = "visibilidad";
document.getElementById("myspin").style.visibility = "visibilidad";
$.post("<%=basePath%>addShopCart.action","name="+nombre+"&telephone="+tele+"&address="+dirección,función(datos){
if(datos.éxito == verdadero) {
getCompraCarritoInfo();
alerta("提交成功");
}demás {
alert("提交失败,请重新提交!");
$("#ji").addClass("ji");
$("#ji").attr("disabled","");
}
});
});
ventana.onload = getShopCartInfo();
ventana.onload = función() {
document.getElementById("bgDiv").style.visibility = "oculto";
document.getElementById("myspin").style.visibility = "oculto";
};
});
//验证联系方式
función validTeleNum() {
vartel = /(^[0-9]{3,4}[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^[0-9]{3 ,4}/-[0-9]{7,8}$) |(^[0-9]{7,8}$)|(^/([0-9]{3,4}/)[0-9]{3,8}$)|(^0{0 ,1}13[0-9]{9}$)/;
if (document.getElementById("tele").value != '') {
if (!tel.test(document.getElementById("tele").value)) {
alert("联系电话格式不正确,请重新输入!");
document.getElementById("tele").value = "";
}
}
}
</script>
</cabeza>
<cuerpo>
<jsp:include page="../jsp/progress.jsp"></jsp:include>
<div id="estático">
<div estilo="text-align: izquierda;">
<a href="javascript:history.go(-1)"><img src="<%=basePath %>pic/fan4.png"></a>
<img src="<%=basePath %>pic/top5.jpg">
</div>
<div>
<div id="principal">
<div>
<ul>
<li>单品</li>
<li>价格</li>
<li>数量</li>
<li>合计</li>
<li>删除</li>
</ul>
</div>
</div>
<div id="main_t">
<div id="main_t_l" estilo="margin-top: 20px;">
</div>
<div id="main_t_a" estilo="margin-top: 20px;">
<hr tamaño="3px;" color="#c1c1c1" estilo=" ancho: 100%; margen superior: 50px;">
<div id="zon"><br>
</div>
<tabla align="centro">
<tr>
<td>姓名:</td>
<td><tipo de entrada="texto" id="nombre"/></td>
</tr>
<tr>
<td>联系方式:</td>
<td><input type="text" id="tele" onblur="validTeleNum()"/></td>
</tr>
<tr>
<td>地址:</td>
<td><tipo de entrada="texto" id="dirección"/></td>
</tr>
</tabla>
<div estilo="margen-izquierda:60%;">
<span style="font-size: 1.2em; color: #f8cd66;">总计</span>
<button style="fondo: #f1fcc4; margen izquierdo: 5px; borde: 3px #f1fcc4 sólido; radio del borde: 3px 3px 3px 3px; -moz-border-radius: 3px; color: #000;" id="precio total"><span></span>￥</button>
<br><br>
</div>
<div estilo="fondo: #f1fcc4;" alinear="centro">
<tipo de entrada="botón" id="ji" valor="提交订单"></entrada><br>
<span style="font-size: 2em; color: #a6ae87; margen izquierdo: 93%;">></span>
</div>
</div>
</div>
</div>
</div>
</cuerpo>
</html>