购物车的实现(二) 淩亂°似流年 2022-12-15 03:48 142阅读 0赞 ## 文件目录 ## ![在这里插入图片描述][20201015142036802.png_pic_center] ## 一:封装ajax请求 ## let axios = { get (url) { return new Promise(function (resolve, reject) { let xhr = new XMLHttpRequest(); // 准备一个请求 url向谁请求 xhr.open('get', url); // 监听状态,接收服务返回的数据 xhr.onreadystatechange = function () { // ajax状态4 服务器 200 if (xhr.readyState == 4 && xhr.status == 200) { // 接收返回值 let res = xhr.responseText; resolve(res) } } // 发送请求 xhr.send(); }) }, post (url, data) { return new Promise(function (resolve, reject) { //1 实例化对象 let xhr = new XMLHttpRequest(); // 2设置一个请求 xhr.open('post', url); // 所有的post请求,必须设置参数的编码方式 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // 3 监听请求 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { // 接收返回值 resolve(xhr.response) } } //4 发送请求 xhr.send(data); }) } } ## 二:商品追加到页面,和添加购物车的实现 ## class Goods { constructor() { Goods.list(); } // 获取商品信息的 // static 静态方法 // 静态方法只属于某个类 static list () { //发送ajax请求 axios.get('http://localhost/day1012-27/cart2/server/server.php?fn=lst') .then(res => { //res是后台返回的数据 // console.log(res); //将数据转化为对象 let { meta, data } = JSON.parse(res); console.log(meta, data); //判断服务器状态 let html = ''; if (meta.status == 200) { //数据是数组对象 取出需要拼接的数据 //需要先循环 data.forEach(ele => { let { id, goodsName, goodsImg, price } = ele; html += `<div class="box"><img src="${goodsImg}" alt=""><p>${goodsName}</p><span class="goods_item_price" data-price-id="100004222715" style="">¥${price}</span><a href="javascript:" id="InitCartUrl" class="btn-special1 btn-lg" onclick="Goods.addCart(${id},1)"> 加入购物车</a></div>`; }) //追加到页面中去 let cont = document.querySelector('#cont') cont.innerHTML = html; } }) } //添加购物车的方法 static addCart (id, num) { console.log(id, num); /* 购物车逻辑: 1 判断cart这个key是否存在 2 存在就判断商品是否存在 2-1 商品存在增加数量 2-2 商品不存在则新增 3 不存在则新增cart */ //取出local中的数据 let cartGoods = localStorage.getItem('cart'); // console.log(cartGoods); //2 判断商品是否存在 if (cartGoods) { cartGoods = JSON.parse(cartGoods); //2 判断商品是否存在 //循环遍历 for in 遍历对象 这里的attr相当于id for (let attr in cartGoods) { if (attr == id) { //2-1商品存在增加数量 num = num + cartGoods[id]; //cartGoods[id] 是当前点击的id id是属性 取的是它的值 num没点一次传输一次 都是1 }//2-2 商品不存在则新增 } cartGoods[id] = num; //相当于添加一个属性和属性值在 cartGoods对象中 localStorage.setItem('cart', JSON.stringify(cartGoods)) } else { //3 不存在就新增cart cartGoods = { [id]: num }; console.log(cartGoods); //转化为字符串 cartGoods = JSON.stringify(cartGoods); localStorage.setItem('cart', cartGoods); } } } new Goods(); [20201015142036802.png_pic_center]: /images/20221123/44df469004af4a91bb564abd20b39eaa.png
还没有评论,来说两句吧...