前端——使用JQuery 实现点击加入购物车（一）

最新推荐文章于 2024-07-30 16:16:40 发布

tingyu_

最新推荐文章于 2024-07-30 16:16:40 发布

阅读量7.1k

点赞数 4

分类专栏： web前端 JQuery

本文链接：https://blog.csdn.net/tingyu_/article/details/107321639

版权

web前端同时被 2 个专栏收录

15 篇文章 3 订阅

订阅专栏

JQuery

3 篇文章 0 订阅

订阅专栏

在本篇文章中，主要实现的功能的是：点击加入购物车

实现效果：点击屏幕上的加入购物车按钮，右侧购物车上面的数字增加1

首先，先上图：

一、上图中左侧数据来源：

这个HTML页面中的数据是写在JSON文件中的，，然后使用JQuery的ajax异步加载，将JSON数据解析出来。

JSON文件中的数据如下：

【注】上面这些数据是单独写在JSON文件里面的，（不要直接将全部数据复制到页面上哦）

二、数据加载：

$(function(){
            $.ajax({
//数据的路径，由于data.json与该HTML文件在同一个文件夹下，所以可以直接写文件名称
                url:"data.json",
//文件数据的类型，，在使用IE浏览器打开时，如果不写这个dataType，结果会是数组类型的数据。
                dataType:"json",
                success:function(result){
                    alert(result);
                },
                error:function(msg){
                    alert(msg);
                }
            })
        })

在这一块中，存在的问题是：

使用JQuery的ajax一步加载JSON数据时，使用chrome浏览器打开时，会报一个错误

Cross origin requests are only supported for protocol schemes: http, data,chrome-extension, https, chrome-extension-resource.

这个错误代表的是跨域的错误，查了资料，这样说的，chrome在读取本地相对路径脚本时，禁止向第三方请求数据。（说实话，我没有明白）

找的解决办法：

1.放入tomcat，然后启动server，开启服务器模式，在浏览器中localhost来访问。（但是在刚开始写HTML文件时对于这一块会不了解，）在此推荐方法2.

2.更改Chrome的属性设置，如下图所示：只需要在红色方块的中后面添上这两个语句：--allow-file-access-from-files和--enable-file-cookies，（亲测有效）

`注意，在写的时候要注意与前面的留出来一个空格`

--allow-file-access-from-files : 允许本地Ajax请求，也叫file协议下的Ajax请求
--enable-file-cookies : 允许chrome保存本地设置cookie

三、数据显示

数据解析出来之后，就需要将解析出来的数据放到页面当中来了，在这个地方，最好的方法就是创建节点，然后将创建的节点插入到HTML页面中。

标签结构如下：

<!-- 商品列表 -->
    <div class="goods_box">
        <ul>
        </ul>
    </div>
    <!-- 右边购物车 -->
    <div class="sc_right">
        <div class="sc_pic">
            <img src="cart.png" alt="">
            <div class="sc_num">
                0
            </div>
        </div>
    </div>

将解析到的数据添加到商品列表中：

数据解析：

可以看到，每一个商品可以看做是一个小块，然后把这个小块放到li 标签中去，在li标签中，有三个部分，goods_pic 用来存放解析出来的数据的图片，goods_title：由于数据中没有这项内容，所以暂且用来这一行字来代替，最后是一个购物车“按钮”，然后将生成的节点添加到ul中。

我们通过for循环，将所有的商品记录都添加到ul中

为什么要在按钮上加上id呢？

在JSON文件的数据中，id是唯一标识每一条数据的，（也就是说每一条数据的id都不相同），在点击加入购物车按钮的时候，我们首先想到的是如何知道点击的按钮与商品是相对应的？这个时候，就是商品的id 在发挥作用了，点击按钮，就会获得一个唯一标识商品的记号（id）

 $(function(){
            $.ajax({
                url:"data.json",
                dataType:"json",
                success:function(result){
                     //alert(result);//在IE中，此时数据是已经格式化的数据
                    for(var i = 0 ;i < result.length ; i++){
                       //生成节点
                        var node = $(`<li class="goods_item">

                                <div class="goods_pic">
                                    <img src="${result[i].img}" alt=""/>
                                </div>

                                <div class="goods_title">【京东超市】奥利奥软点小草莓</div>

                                <div class="sc">
                                    <div id="${result[i].id}" class="sc_btn">加入购物车</div>
                                </div>
                            </li>`);
                            // 注。在JQuery中全部是批量操作，所以要确保插入的地方正确
                            // 注：ajax下载数据，加载页面是异步操作。

                      //将生成的节点添加到ul上
                        node.appendTo(".goods_box ul");
                    }
                },
                error:function(msg){
                    console.log(msg);
                }
            })

页面的样式代码（CSS）如下：


        *{margin: 0;padding: 0;}
        li{list-style: none;}
        /* body{
            position: relative;
        } */
        .goods_box ul{
            width: 1100px;
            margin: 0 auto;
        }
        .goods_item{
            float: left;
            border-right: 1px solid #b6b6b6;
            padding: 10px 6px;
            margin-bottom: 20px;
        }
        .goods_item img{
            width: 160px;
            height: 160px;
            padding: 20px 15px;
            position: relative;
        }
        .goods_title{
            font-size: 12px;
            color: #999;
            text-align: center;
            /* 超过一行用省略号显示 */
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            padding: 13px 0 7px;
        }
        .sc_btn{
            /* position: absolute; */
            width: 120px;
            height: 30px;
            background-color: red;
            color: white;
            font-size: 16px;
            font-weight: bold;
            line-height: 30px;
            text-align: center;
            margin: 0 auto;
            border-radius: 5px;
        }
        .sc_pic{
            position: absolute;
            width: 50px;
            height: 50px;
            right: 22px;
            top: 350px;
        }
        .sc_pic .sc_num{
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-radius: 50%;
            font-size: 16px;
            background-color: red;
            color: white;
            font-weight: bold;
            position: absolute;
            top: -3px;
            right: 7px;
        }
        .sc_pic img{
            width: 100%;
            height: 100%;
        }

数据显示成功之后，接下来就是主要功能了。

在点击加入购物车按钮的时候，添加点击事件，将加入购物车的商品数据存放的cookie中，然后再计算cookie中总商品的数量，显示出来

在添加点击事件的时候，li标签属于后添加的节点，所以直接给li标签添加点击事件是添加不上的，此时的解决办法是，给li标签的父标签ul添加点击事件，（通过on来进行添加）

步骤：

获得当前点击按钮的商品的id ，判断是不是第一次添加cookie，

1.如果是，则新建cookie，存储商品（可以先用数组类型来存放需要存入cookie的数据，然后转化为JSON格式）

2.如果不是，判断之前是否添加过

判断方法：取出cookie中已经存在的数据，（这个数据是JSON格式字符串），然后将JSON格式字符串转换为数组，通过遍历数组，判断当前id与cookie中已存在商品的id是否一样，若一样，则添加过，若不一样，则没有添加过。

若添加过：则商品数量的值加一

若没有添加过：则添加数据

点击事件的代码如下：

$(".goods_box ul").on("click",".sc_btn", function(){
                // 加入购物车按钮所在商品的商品id
                /*
                    cookie里面存储购物车的数据
                    1.cookie有大小限制，只存储商品 的id和商品数量
                    2.cookie里面只能存储字符  将数据结构转成json格式字符串进行存储

                    [{id:1,num:2}]

                    cookie该怎么存储
                    1.判断是否是第一次添加cookie
                        1.1是，新建cookie，存储商品
                        1.2 不是，判断之前是否添加过
                            1.2.1 是 数量加一
                            1.2.2  不是 新增一条商品记录
                */
                var id = this.id;
                var first = $.cookie("goods") == null ? true : false;
                if(first){
                    // $.cookie("goods",`[{"id":${id},"num":1}]`);
                    var arr = [{id:id,num:1}]
                    $.cookie("goods",JSON.stringify(arr),{
                        expires:7
                    })
                }else{
                    // 如果不是第一次添加，判断之前是否添加过
                    var cookieStr = $.cookie("goods");//取出cookie中已经存在的数据，这个数据是JSOn格式字符串
                    var cookieArr = JSON.parse(cookieStr);//将JSON格式字符串转成数组
                    var same = false;//假设没有添加过这个商品
                    // 通过循环判断是否有符合条件的 元素
                    for( var i = 0;i<cookieArr.length;i++){
                        if(id == cookieArr[i].id){
                            same = true;
                            cookieArr[i].num++;
                            break;
                        }
                    }
                    if(!same){
                        cookieArr.push({id:id,num:1});
                    }
                    // 将数据存回cookie
                    $.cookie("goods",JSON.stringify(cookieArr),{
                        expires:7
                    })
                }
                // alert($.cookie("goods"));
                console.log($.cookie("goods"));
//计算cookie中商品总数的函数
                sc_num();
                
            })

计算加入购物车的商品总数的函数：

步骤：

从cookie中获取商品，并赋值给一个变量，如果这个变量不为空则计算求和

首先将这个变量从JSON格式字符串转化为数组格式，然后遍历数组，将商品数量累加，最后填入购物车右上角的小div即可。

function sc_num(){
                var cookieStr = $.cookie("goods");
                if(cookieStr){
                    // 计算求和
                    var cookieArr = JSON.parse(cookieStr);
                    var sum = 0;
                    for(var i = 0 ; i < cookieArr.length;i++){
                        sum += cookieArr[i].num;
                    }
                    console.log(sum);
                    $(".sc_right .sc_num").html(sum);
                }
                else{
                    $(".sc_right .sc_num").html(0);
                }
            }
        })

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery购物车</title>
    <script src="../jquery-1.10.1.min.js"></script>
    <script src="../JQuery/jquery.cookie.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        /*去掉li标签的默认圆点  */
        li{list-style: none;}
        /* body{
            position: relative;
        } */
        
        .goods_box ul{
            width: 1100px;
            /* 商品列表大块左右居中 */
            margin: 0 auto;
        }
        /* 每一个商品左浮动 */
        .goods_item{
            float: left;
            border-right: 1px solid #b6b6b6;
            padding: 10px 6px;
            margin-bottom: 20px;
        }
        .goods_item img{
            width: 160px;
            height: 160px;
            padding: 20px 15px;
            /* position: relative; */
        }
        .goods_title{
            font-size: 12px;
            color: #999;
            text-align: center;
            /* 超过一行用省略号显示 */
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            padding: 13px 0 7px;
        }
        .sc_btn{
            /* position: absolute; */
            width: 120px;
            height: 30px;
            background-color: red;
            color: white;
            font-size: 16px;
            font-weight: bold;
            line-height: 30px;
            text-align: center;
            margin: 0 auto;
            border-radius: 5px;
        }
        .sc_pic{
            position: absolute;
            width: 50px;
            height: 50px;
            right: 22px;
            top: 350px;
        }
        .sc_pic .sc_num{
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-radius: 50%;
            font-size: 16px;
            background-color: red;
            color: white;
            font-weight: bold;
            position: absolute;
            top: -3px;
            right: 7px;
        }
        .sc_pic img{
            width: 100%;
            height: 100%;
        }
    </style>
    <script >
        
        $(function(){
            sc_num();
            $.ajax({
                url:"data.json",
                dataType:"json",
                success:function(result){
                     alert(result);//在IE中，此时数据以及是以及格式化的数据
                    for(var i = 0 ;i < result.length ; i++){
                        var node = $(`<li class="goods_item">
                                        <div class="goods_pic">
                                            <img src="${result[i].img}" alt=""/>
                                        </div>
                                        <div class="goods_title">【京东超市】奥利奥软点小草莓</div>
                                        <div class="sc">
                                            <div id="${result[i].id}" class="sc_btn">加入购物车</div>
                                        </div>
                                    </li>`);
                            // 注。在JQuery中全部是批量操作，所以要确保插入的地方正确
                            // 注：ajax下载数据，加载页面是异步操作。
                        node.appendTo(".goods_box ul");
                    }
                },
                error:function(msg){
                    console.log(msg);
                }
            })
            // 要给后添加的节点添加点击事件 只需要通过  事件委托  就可以了
            $(".goods_box ul").on("click",".sc_btn", function(){
                // 加入购物车按钮所在商品的商品id
                /*
                    cookie里面存储购物车的数据
                    1.cookie有大小限制，只存储商品 的id和商品数量
                    2.cookie里面只能存储字符  将数据结构转成json格式字符串进行存储

                    [{id:1,num:2}]

                    cookie该怎么存储
                    1.判断是否是第一次添加cookie
                        1.1是，新建cookie，存储商品
                        1.2 不是，判断之前是否添加过
                            1.2.1 是 数量加一
                            1.2.2  不是 新增一条商品记录
                */
                var id = this.id;
                var first = $.cookie("goods") == null ? true : false;
                if(first){
                    // $.cookie("goods",`[{"id":${id},"num":1}]`);
                    var arr = [{id:id,num:1}]
                    $.cookie("goods",JSON.stringify(arr),{
                        expires:7
                    })
                }else{
                    // 如果不是第一次添加，判断之前是否添加过
                    var cookieStr = $.cookie("goods");//取出cookie中已经存在的数据，这个数据是JSOn格式字符串
                    var cookieArr = JSON.parse(cookieStr);//将JSON格式字符串转成数组
                    var same = false;//假设没有添加过这个商品
                    // 通过循环判断是否有符合条件的 元素
                    for( var i = 0;i<cookieArr.length;i++){
                        if(id == cookieArr[i].id){
                            same = true;
                            cookieArr[i].num++;
                            break;
                        }
                    }
                    if(!same){
                        cookieArr.push({id:id,num:1});
                    }
                    // 将数据存回cookie
                    $.cookie("goods",JSON.stringify(cookieArr),{
                        expires:7
                    })
                }
                // alert($.cookie("goods"));
                console.log($.cookie("goods"));
                sc_num();
                
            })
            // alert(1);
            function sc_num(){
                var cookieStr = $.cookie("goods");
                if(cookieStr){
                    // 计算求和
                    var cookieArr = JSON.parse(cookieStr);
                    var sum = 0;
                    for(var i = 0 ; i < cookieArr.length;i++){
                        sum += cookieArr[i].num;
                    }
                    console.log(sum);
                    $(".sc_right .sc_num").html(sum);
                }
                else{
                    $(".sc_right .sc_num").html(0);
                }
            }
        })
    </script>
</head>
<body>
    <!-- 商品列表 -->
    <div class="goods_box">
        <ul>
                    </ul>
    </div>

    <!-- 右边购物车 -->
    <div class="sc_right">
        <div class="sc_pic">
            <img src="cart.png" alt="">
            <div class="sc_num">
                0
            </div>
        </div>
    </div>
</body>
</html>