这篇文章主要介绍了使用ajax、json实现京东购物车结算界面的数据交互实例,非常不错，具有参考借鉴价值，需要的朋友可以参考下
登录后复制 全选 商品
单价 数量 小计 操作
全选 删除选中产品
总价：￥0
body,html,ul,li,a{ margin:0;padding:0;font-family:"microsoft yahei";list-style:none;text-decoration:none;}.fl{ float:left;}.fr{ float:right;}.f12{ font-size:12px;}.disl{ display:inline-block;}.w100{ width:100px;}.fw{ font-weight:bold;}.goodsList_menu{ width:990px;height:45px;background:#f3f3f3;margin:0 auto;line-height:45px; font-size:14px;color:#333;border:1px solid #ddd;}.goodsList_menu .goodsListfl ul li{ float:left;margin-right:80px;cursor:pointer;}.goodsList_menu .goodsListfr ul li{ float:left;margin-right:37px;text-align:center;cursor:pointer;}/*内容*/.goodsList_content{ width:100%;height:80px;border-bottom:1px solid #eee;padding:20px 0;margin-top:40px;}.goodsList_content .disl{ line-height:20px;width:300px;cursor:pointer;margin-left:10px;}.goodsList_content .disl span:hover{ color:#e4393c;}.goodsList_content .disl p:hover{ color:#e4393c;}.goodsListnum .listNum{ widows:45px;height:21px;width:50px;border:1px solid #eee;text-align:center; outline:none;}.goodsListnum ul li{ float:left;margin-right:30px;text-align:center;cursor:pointer;}.goodsListnum ul li a{ border:1px solid #ddd;padding:2px 7px;color:#000;}.goodsListnum ul li p{ line-height:0;color:#666;font-size:12px;margin-top:-2px;}.buy_goods p{ background:url(../images/arrow.png)no-repeat;padding-left:30px;background-position:-20px -20px;}.buy_goods{ position:relative;}/*底部结账*/.checkout{ height:55px;border:1px solid #eee;margin-top:20px;line-height:55px;}.checkout .checkoutleft ul li{ float:left;margin-right:10px;cursor:pointer;}.checkout .checkoutSum{ font-weight:bold;font-size:18px;color:#e64346;}.checkout .checkoutright input{ border:none;color:#fff;outline:none;width:100px;height:55px;line-height:55px; font-size:20px;background:#e64346;margin-left:50px;cursor:pointer;}
登录后复制
$.ajax({ type:"get", url:"jd.json", dataType:"json", success:function(data){ var list = data.list;//拿到list数组 //console.log(list); for(var i=0;i<list.length;i++){ var numArray = list[i]; numArray.price = (numArray.price).toFixed(2); var text = ""+ ""+ "
"+ ""+numArray.description+"
购买礼品服务"+ "
"+ ""+numArray.color+""+ "
"+ "
- ￥"+numArray.price+""+ "
- -"+ "+
有货"+ "
- ￥"+numArray.price*numArray.quentity+""+ "
- 删除"+ "" $(text).appendTo(".goodsListbox"); } }, error:function(){ console.log("调用数据失败！"); } }); var listNum,price,sums,sub1,sub2; function add(obj){ listNum = $(obj).prev().val();//input值 listNum = parseInt(listNum); var num = parseInt(listNum+1);//input值每次+1 $(obj).prev().val(num); price = $(obj).parent().prev().children('span').text();//找到单价 price = parseInt(price);//转换成number类型 price = price.toFixed(2); sums = $(obj).parent().next().children('span').text()//找到总金额 sums = parseInt(sums); console.log(typeof sums); $(obj).parent().next().children('span').text(price*num); sub1 = $(".goodsList_content:eq(0)").find("#sub").text(); sub2 = $(".goodsList_content:eq(1)").find("#sub").text(); sub1 = parseInt(sub1); sub2 = parseInt(sub2); var res = $(".checkoutright .checkoutSum").text((sub1+sub2).toFixed(2)); } function minus(obj){ listNum = $(obj).next().val(); listNum = parseInt(listNum); if(listNum<=1){ listNum==1; }else{ --listNum; } $(obj).next().val(listNum); price = $(obj).parent().prev().children('span').text();//找到单价 price = parseInt(price);//转换成number类型 price = price.toFixed(2); sums = $(obj).parent().next().children('span').text()//找到总金额 sums = parseInt(sums); $(obj).parent().next().children('span').text(price*listNum); $(".checkoutright .checkoutSum").text(price*listNum); sub1 = $(".goodsList_content:eq(0)").find("#sub").text(); sub2 = $(".goodsList_content:eq(1)").find("#sub").text(); sub1 = parseInt(sub1); sub2 = parseInt(sub2); $(".checkoutright .checkoutSum").text(sub1+sub2); }
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
基于CORS实现WebApi Ajax 跨域请求解决方法
ajax前台后台跨域请求处理方式（图文教程）
原生JS实现Ajax跨域请求flask响应内容（图文教程）
以上就是使用Ajax、json实现京东购物车结算界面的数据交互实例（图文教程）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2759381.html
