模拟Json加载数据（淘宝购物车效果1）

最新推荐文章于 2025-06-17 20:46:50 发布

原创最新推荐文章于 2025-06-17 20:46:50 发布 · 3.3k 阅读

CC 4.0 BY-SA版权

本文介绍了一个简单的商品展示页面的搭建过程，并实现了商品加入购物车的功能。使用了HTML、CSS和JavaScript等前端技术，展示了如何通过动态生成HTML元素来展示商品列表，并通过JavaScript实现了点击按钮将商品信息保存到Cookie中的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        #container{width:1200px;border:solid 1px #ccc;height:500px;}
        .goods{float:left;margin-left:10px;width:200px;padding:5px; border:orange 1px solid; border-radius:3px;}
        .goods>img{width:200px;height:auto;display:block;}
        .gid{display:none;}
    </style>
</head>
<body>
<a href="shopcart.html">我的购物车</a>
<div id="container">
    <!--
    <div class="goods">
        <span class="gid"></span>
        <img src="images/aw11.jpg" alt="">
        <p>商品名称:<span>外星人</span></p>
        <p>商品单价: <span>14999</span></p>
        <p><button>加入购物车</button></p>
    </div>-->
</div>
<script src="cookie.js"></script>
<script>
    // 定义JSON，模拟后台的数据:后台从数据库中读取出来的。前台通过Ajax调用到的后台JSON数据
    var _goodslist = [{gid:"good1",gimg:"images/aw11.jpg", gname:"外星人AW14", gprice:"14999"},
        {gid:"good2",gimg:"images/chunmo21.jpg", gname:"唇膜2", gprice:"149"},
        {gid:"good3",gimg:"images/chunmo23.jpg", gname:"唇膜1", gprice:"122"},
        {gid:"good4",gimg:"images/dell11.jpg", gname:"Dell", gprice:"4999"},
        {gid:"good5",gimg:"images/iphone7_11.jpg", gname:"IPhone 7", gprice:"6399"}
                    ];
    /*
     1. 定义函数进行JSON加载
      */
    var _container = document.getElementById("container");
    function loadJSON() {
        // 循环出去每一个商品的JSON对象
        for(var i = 0; i < _goodslist.length; i++){
            // 获取当前商品的JSON对象
            var _json = _goodslist[i];

            // DOM操作，添加到页面中
            var _div = document.createElement("div");//goods
            _div.className = "goods";

            var _spanid = document.createElement("span");
            _spanid.className = "gid";
            _spanid.textContent = _json.gid;

            var _img = document.createElement("img");
            _img["src"] = _json.gimg;

            var _pName = document.createElement("p");
            _pName.textContent = "商品名称：";
            var _span1 = document.createElement("span");
            _span1.textContent = _json.gname;
            _pName.appendChild(_span1);

            var _pPrice = document.createElement("p");
            _pPrice.textContent = "商品单价：";
            var _span2 = document.createElement("span");
            _span2.textContent = _json.gprice;
            _pPrice.appendChild(_span2);

            var _pBtn = document.createElement("p");
            var _btn = document.createElement("button");
            _btn.textContent = "加入购物车";
            _pBtn.appendChild(_btn);

            // 添加到页面中
            _div.appendChild(_spanid);
            _div.appendChild(_img);
            _div.appendChild(_pName);
            _div.appendChild(_pPrice);
            _div.appendChild(_pBtn);
            _container.appendChild(_div);
        }
    }

    loadJSON();//执行并加载JSON数据到页面中

    /*
        2.加入购物车委托
     */
    _container.onclick = function(e) {
        e = e || window.event;
        var _target = e.target || e.srcElement;

        if(_target.nodeName.toLowerCase() == "button") {
            var _fc = _target.parentNode.parentNode.firstElementChild;
            var _gid = _fc.textContent;// id编号
            var _gimg = _fc.nextElementSibling["src"];// 图片
            var _gname = _fc.nextElementSibling.nextElementSibling.children[0].textContent;//名称
            var _gprice = _target.parentNode.previousElementSibling.children[0].textContent;//价格
            // 调用加入购物车
            alert("商品成功加入购物车");
            addShopcart(_gid, _gimg, _gname, _gprice, 1);
        }
    }

    /*
    3. cookie操作
    cookie k=v
     */
    function addShopcart(gid, gimage, gname, gprice, count) {
        // console.log("加入购物车", gid, gimage, gname, gprice, count);
        //1.封装成json数据
        var _json = {gid:gid, gimg:gimage, gname:gname, gprice:gprice, count:count};
        // 2.保存到cookie中
        // 先判断加入购物车的商品cookie中是否已经存在
        // 如果存在，取出cookie中这个商品，让购买数量+1；如果不存在，直接保存。
        var _goods = getCookie(_json.gid);
        if(_goods){
            var _jsonGoods = JSON.parse(_goods);//将读取出来的JSON字符串转成JSON对象
            _jsonGoods.count++;
            modifyCookie(_json.gid, JSON.stringify(_jsonGoods), 10);
        } else {
            saveCookie(_json.gid, JSON.stringify(_json), 10);
        }
        // 测试：3. 读取cookie中的数据，查看信息
        // console.log(getCookie(_json.gid));
    }
</script>
</body>
</html>