1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 基于layui+jquery的购物车页面源码

基于layui+jquery的购物车页面源码

时间:2019-06-18 18:43:07

相关推荐

基于layui+jquery的购物车页面源码

之前功能还好好的,不知道为什么修饰了一下前端,加减按钮就不能用了。记录一下原来的写法。

<!-- 购物车页面 --><!-- 传进购物车的商品放到一个数组中(session),打开此页面都查询 --><%@ page isELIgnored="false" %><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="/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){//商品数量未减到0if($("#selectid"+status).prop("checked")){cartnum--;$("#decnum"+status).val(cartnum);//更改页面numcartnumarr[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);//更改页面numcartnumarr[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};//用户idif (selectedcartid==null){alert("请先选择商品!");}else{var userid=${user.id};//用户idvar 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,//传回去选中的cartiduserid: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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。