这篇博客记录了购物车页面前端功能的问题及修复过程。问题在于加减按钮失效，修复涉及用户ID获取、商品数量的增减操作、选中商品的总价计算以及提交订单的AJAX请求。代码中使用jQuery进行DOM操作，实现了商品数量的动态更新、删除商品、选中商品总价计算以及提交订单的功能。
之前功能还好好的，不知道为什么修饰了一下前端，加减按钮就不能用了。记录一下原来的写法。
<!-- 购物车页面 -->
<!-- 传进购物车的商品放到一个数组中(session),打开此页面都查询 -->
<%@ page isELIgnored="false" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>我的购物车</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<link rel="stylesheet" href="css/top_css.css">
<link rel="stylesheet" type="text/css" href="css/flowers_cart_css.css">
<link rel="stylesheet" href="/sources/layui/css/layui.css">
<script type="text/javascript">
$(function () {
var userid=${user.id};//用户id
//获取购物车id数组
var cartidarr=document.getElementsByName("arrid");
//获取购物车num数组
var cartnumarr=document.getElementsByName("cartnumarr");
var arrprice=document.getElementsByName("arrprice");
var selectid=document.getElementsByName("selectid");//获取复选框对象集合
var selectedcartid=[];//选中的cartid数组
var statusarr=[];//选中的序号
$(".decnum").on("click",function () {
//alert("点击-按钮");
var status=$("button:focus").val();//通过鼠标焦点获取当前购物车编号
alert("dec status="+status);
var deccartid=cartidarr[status].value;//获取当前购物车具体商品id
//alert("当前获取的购物车编id为："+deccartid);
var cartnum=cartnumarr[status].value;//获取此购物车具体商品数量
//alert(" dec cartnum="+cartnum);
if(cartnum>1){//商品数量未减到0
if($("#selectid"+status).prop("checked")){
cartnum--;
$("#decnum"+status).val(cartnum);//更改页面num
cartnumarr[status].value=cartnum;//更改修改后的数量数组
}
else{
alert("请先选中商品!");
}
}else{//删除商品并刷新页面
$.ajax({
data:{
deccartid:deccartid
},
type:"post",
url:"cartdelete",
success:function (result) {
if(result>0){
alert("删除商品成功");
location.href="getallcarmessage?userid="+userid;
}else{
alert("删除商品失败");
}
}
});
}
});
$(".addnum").on("click",function () {
//alert("点击+");
var status=$("button:focus").val();//通过鼠标焦点获取当前购物车编号
//alert("add status="+status);
//var cartnum=cartnumarr[status].value;
//alert("cartnum="+cartnum);
var cartnum=$("#cartnuminput"+status).val();
alert(cartnum);
if(cartnum<50){
if($("#selectid"+status).prop("checked")){
cartnum++;
$("#addnum"+status).val(cartnum);//更改页面num
cartnumarr[status].value=cartnum;//更改修改后的数量数组
}
else{
alert("请先选中商品!");
}
}else{
alert("您增加的商品已经超过上限，增加失败！");
}
});
$(".selectid").on("click",function () {
var status=$("input:focus").val();//通过鼠标焦点获取当前编号
alert("status="+status);
var price=Number(arrprice[status].value);//获取所选商品价格
var sum=Number($("#totalprice").val());//获取总价格
//alert("sum="+sum);
if($("input:focus").is(':checked')){//id被选中
//alert("被选中");
$("#totalprice").val(sum+price);
selectedcartid[status]=cartidarr[status].value;
statusarr.push(status);
}else{
//alert("不被选中");
$("#totalprice").val(sum-price);
selectedcartid[status]=-1;
if(statusarr!=null)
statusarr.pop();//移除选中数组
}
});
$("#cartform").click(function () {
var userid=${user.id};//用户id
if (selectedcartid==null){
alert("请先选择商品！");
}
else{
var userid=${user.id};//用户id
var cartnum=[];
for(i=0;i<cartnumarr.length;i++){
//alert("提交表单时 数量数组为：cartnumarr[i]="+cartnumarr[i].value+"selectedcartid[i]="+selectedcartid[i]);
cartnum[i]=cartnumarr[i].value;
//alert("cartnum[i]"+cartnum[i]);
}
$.ajax({
data:{
selectedcartid:selectedcartid,//传回去选中的cartid
userid:userid,//用户名
cartnum:cartnum,//商品数量数组
statusarr:statusarr//选中商品序号
},
type:"post",
url:"addorder",
traditional:true,
success:function (result) {
if(result){
location.href="getallorder?userid="+userid;
}
}
});
}
});
});
</script>
</head>
<body>
<!--头部小导航栏-->
<div class="tital">
<div class="first_nagivation">
<ul class="first_nagivation_ul">
<li class="first_nagivation_a3"><i class="layui-icon layui-icon-heart-fill"></i>花轻语·最美即当下</li>
<li class="first_nagivation_li" id="first_nagivation_li">中国领先鲜花速递服务</li>
<li class="first_nagivation_li"><a href="getallorder?userid=${user.id}" class="first_nagivation_a"><span class="first_nagivation_a2">订单查询 </span></a></li>
<li class="first_nagivation_li"><a href="getallcarmessage?userid=${user.id}" class="first_nagivation_a"> <span class="first_nagivation_a2">购物车 </span></a></li>
<li class="first_nagivation_li">欢迎您！${user.nickname}</li>
</ul>
</div>
</div>
<div class="cart">
<!--设置总金额变量-->
<c:set var="totalprice" value="0"></c:set>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md10">
<form id="form">
<table class="layui-table">
<colgroup>
<col width="50">
<col width="50">
<col width="150">
<col width="300">
<col width="100">
<col width="100">
<col width="100">
</colgroup>
<thead>
<tr>
<th>序号</th>
<th></th>
<th>商品名称</th>
<th></th>
<th>原价</th>
<th>数量</th>
<th>订购价</th>
</tr>
</thead>
<tbody>
<c:forEach items="${cartList}" var="cart" varStatus="status">
<tr>
<td>${status.index}</td>
<td>
<input type="hidden" name="index" value="${status.index}">
<input type="checkbox" name="selectid" class="selectid" id="selectid${status.index}" value="${status.index}">
</td>
<td><img src="images/${cart.flowername}.jpg " width="100px" height="100px"></td>
<td>${cart.flowername}</td>
<td>${cart.price}</td>
<td><span><button type="button" value="${status.index}" class="decnum" id="decnum${status.index}">－</button></span>
<input type="hidden" name="arrid" value="${cart.id}">
<input type="hidden" name="arrprice" value="${cart.price*cart.num}">
<input type="text" value="${cart.num}" name="cartnumarr" id="cartnuminput${status.index}" style="width: 30px;">
<span><button type="button" class="addnum" id="addnum${status.index}" value="${status.index}">＋</button></span>
</td>
<td>
<span id="${cart.id}" class="onesumprice">${cart.price*cart.num}</span>
</td>
</tr>
<%--<c:set var="totalprice" value="${totalprice+cart.price*cart.num}"></c:set>--%>
</c:forEach>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
<div class="other">
<ul>
<li id="a1"><a href="getallflowermessage?userid=${user.id}"><i class="layui-icon layui-icon-return" style="font-size: 10px;"></i>继续挑选</a></li>
<li id="a2"><span>应付金额:￥<input type="text" id="totalprice" value="${totalprice}" style="width: 50px;"></input></span></li>
<li id="a3"><button class="layui-btn layui-btn-lg layui-btn-radius" type="button" id="cartform">去结算</button></li>
</ul>
</div>
</body>
</html>
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
