1.功能介绍

购物车页面的功能包括：极速快三平台源码出售（www.1159880099.com）QQ1159880099选择要购买的商品、全选商品；商品数量增减；商品删除；价格总计。

2.实现思路

根据利用冒泡原理，使用jQuery的.on()方法为整个购物车的父元素绑定事件，从而点击子元素时也可触发事件。

3.实现代码

checkAll.php(商品全选功能)

<?php
//思路：根据前端传来的用户id和是否选中(is_checked)的值，修改数据库购物车列表中，该用户所有商品是否选中的值。
require_once("../init.php"); session_start(); @$uid=$_SESSION["uid"]; @$checkAll=$_REQUEST["checkall"]; if($uid!=null&&$checkAll!=null){ $sql="UPDATE xxx_shoppingcart_item SET is_checked=$checkAll WHERE uid=$uid"; mysqli_query($conn,$sql); }

get.php(加载用户购物车中的商品信息)

<?php
//data/cart/get.php
//购物车页面当前用户的购物车商品汇总，用户信息存储在session中
header("Content-Type:application/json"); require_once("../init.php"); session_start(); @$uid=$_SESSION["uid"]; //如果用户已登录 if($uid!=null){ $sql="SELECT *,(SELECT sm FROM xxx_product_details_pic WHERE pid=pid limit 1) AS sm FROM xxx_shoppingcart_item INNER JOIN xxx_product_details ON pid=lid WHERE uid=$uid"; //子查询和连接查询，查询要显示的商品信息内容 $result=mysqli_query($conn,$sql); echo json_encode(mysqli_fetch_all($result,1)); };

check.php(单个商品是否选中功能)

<?php
//data/cart/check.php
//接收前端传来的商品id和是否选中的值，修改数据库购物车列表中的数据
require_once("../init.php"); @$iid=$_REQUEST["iid"]; @$checked=$_REQUEST["checked"]; if($iid!=null&&$checked!=null){ $sql="UPDATE xxx_shoppingcart_item SET is_checked=$checked WHERE iid=$iid"; mysqli_query($conn,$sql); }

deleteOne.php(删除单个商品功能)

<?php
//data/cart/deleteOne.php
@$iid=$_REQUEST["iid"]; if($iid!=null){ $sql="DELETE FROM xxx_shoppingcart_item WHERE iid=$iid"; mysqli_query($conn,$sql); };

deleteChecked.php(删除选中商品的功能)

<?php
//利用session中存储的用户信息，删除用户购物车中选中的所有商品
require_once("../init.php"); session_start(); @$uid=$_SESSION["uid"]; if($uid!=null){ $sql="DELETE FROM xxx_shoppingcart_item WHERE uid=$uid AND is_checked=1"; mysqli_query($conn,$sql); };

cart.js

$(()=>{
//DOM加载后执行
    //上边全选按钮
    var $chbAlls=$(".check-top>img,.all>span>img"); $chbAlls.click(function(){ var $img=$(this); var checkall=$img.attr("src").endsWith("normal.png")?1:0; //endsWith() 判断是否以字符串为结尾，返回布尔类型 $.get("data/cart/checkAll.php",{checkall},()=>{ loadCart(); }); //$(".check-top>img").attr("src","img/cart/product_true.png"); }); //加载购物车页面商品信息 function loadCart(){ $.getJSON("data/cart/get.php",items=>{ //全选按钮 $chbAlls.attr("src", items.every(item=>item.is_checked==1)? "img/cart/product_true.png": "img/cart/product_normal.png" ); var html=""; var total_count=0; var total=0; for(var item of items){ //计算选中商品的总价和商品总数 if(item.is_checked==1){ total+=item.price*item.count; total_count+=parseInt(item.count); }; //加载商品信息 html+=`<div class="imfor"> <div class="check"> <img src="img/cart/product_${item.is_checked==0?'normal':'true'}.png" data-iid="${item.iid}" alt=""> </div> <div class="product"> <a href="product_details.html?pid=${item.lid}"> <img src="${item.sm}" alt=""> </a> <span class="desc"> <a href="product_details.html?pid=${item.lid}">${item.title}</a> </span> <p class="col"> <span></span> <span class="color-desc"></span> </p> </div> <div class="price"> <p class="price-desc"></p> <p> <b>¥</b>${item.price} </p> </div> <div class="num"> <span class="reduce" data-iid="${item.iid}">&nbsp;-&nbsp;</span> <input type="text" value="${item.count}"> <span class="add" data-iid="${item.iid}">&nbsp;+&nbsp;</span> </div> <div class="total-price"> <span>¥</span> <span>${(item.count*item.price).toFixed(2)}</span> </div> <div class="del"> <a href="#" data-iid="${item.iid}">删除</a> </div> </div> </div>`; } $("#content-box-body").html(html); $(".totalPrices,.foot-price").html("¥"+total.toFixed(2)); $(".total,.totalOne").html(total_count); }); }; $.getJSON("data/users/isLogin.php",data=>{ //确认用户是否登录 if(data.ok==1){ loadCart(); //为父元素添加单击事件 $("#content-box-body").on("click", ".imfor>.check>img,.reduce,.add,.del>a,#box>.foot>.base>a", function(){ var $tar=$(this); //单个商品是否选中按钮 if($tar.is("img")){ var iid=$tar.data("iid"); var checked=$tar.attr("src").endsWith("normal.png")?1:0; $.get("data/cart/check.php",{iid,checked},()=>{ loadCart(); }); //单个商品删除功能 }else if($tar.is(".del>a")){ var iid=$tar.data("iid"); $.get("data/cart/deleteOne.php",{iid},()=>{ loadCart(); }) //商品数量增减功能 }else if($tar.is(".reduce,.add")){ var iid=$tar.data("iid"); var count=parseInt($tar.siblings("input").val()); if($tar.is(".add")) count++; else count--; $.get("data/cart/update.php",{iid,count}).then(()=>{ loadCart(); }) } }); //底部删除选中商品 $("#content-box>.foot>.base>a").click(function(){ $.get("data/cart/deleteChecked.php").then(loadCart); }); }else{ location.href="login.html?back="+location.href; } }) });