前端——使⽤JQuery实现点击加⼊购物车（⼀）在本篇⽂章中，主要实现的功能的是：点击 加⼊购物车
实现效果：点击屏幕上的加⼊购物车按钮，右侧购物车上⾯的数字增加1
⾸先，先上图：
⼀、上图中左侧数据来源：
这个HTML页⾯中的数据是写在JSON⽂件中的，，然后使⽤JQuery的ajax异步加载，将JSON数据解析出来。
JSON⽂件中的数据如下：
【注】上⾯这些数据是单独写在JSON⽂件⾥⾯的，（不要直接将全部数据复制到页⾯上哦）
⼆、数据加载：
$(function(){
$.ajax({
//数据的路径，由于data.json与该HTML⽂件在同⼀个⽂件夹下，所以可以直接写⽂件名称
url:"data.json",
//⽂件数据的类型，，在使⽤IE浏览器打开时，如果不写这个dataType，结果会是数组类型的数据。
jquery下载文件请求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来访问。（但是在刚开始写H
TML⽂件时对于这⼀块会不了解，）在此推荐⽅法
2.
2.更改Chrome的属性设置，如 下图所⽰：只需要在红⾊⽅块的中 后⾯添上这两个语句：--allow-file-access-from-files和--enable-file-cookies，（亲测有效）
注意，在写的时候要注意与前⾯的留出来⼀个空格
component文件可以删吗--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">
</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;
text-overflow: ellipsis;
overflow: hidden;
padding: 13px 0 7px;
}
.sc_btn{
/* position: absolute; */
width: 120px;synchronize什么意思
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;
true和false意思计算机border-radius: 50%;
font-size: 16px;
background-color: red;
color: white;
font-weight: bold;
mysql从入门到精通出版日期position: absolute;
top: -3px;
right: 7px;
}
queue排队短语.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是否⼀样，若⼀样，则添加过，若不⼀样，则没有添加过。
若添加过：则商品数量的值加⼀
若没有添加过：则添加数据
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论