使用Ajax、json实现京东购物车结算界面的数据交互实例
2017-02-27 09:07
906 查看
<div class="goodsList_menu"> <div class="goodsList"> <div class="goodsListfl"> <input class="fl" style="margin:15px 10px 0 10px;" type="checkbox" name="" /> <ul> <li>全选</li> <li>商品</li> </ul> </div> <div class="goodsListfr fr"> <ul> <li>单价</li> <li class="w100">数量</li> <li class="w100">小计</li> <li>操作</li> </ul> </div> </div> <!--内容--> <div class='goodsListbox'></div> <div class="checkout"> <div class="checkoutleft"> <input class="fl" style="margin:21px 10px 0 10px;" type="checkbox" name="" /> <ul> <li>全选</li> <li>删除选中产品</li> </ul> </div> <div class="checkoutright fr"> <span>总价:<b>¥</b></span><span class="checkoutSum">0</span> <input type="button" value="去结算" /> </div> </div> </div>
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; }
<script> $.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 = "<div class='goodsList_content'><div class='fl buy_goods'>"+ "<input class='fl' style='margin:15px 10px 0 10px;' type='checkbox' name='' />"+ "<img align='top' src='images/1.jpg' /><div class='disl'>"+ "<span>"+numArray.description+"</span><p class='f12'>购买礼品服务</p></div>"+ "<div class='disl' style='width:auto;position:absolute;right:-100px;top:0;'>"+ "<span>"+numArray.color+"</span></div></div>"+ "<div class='fr goodsListnum' style='margin-top:-12px;'>"+ "<ul><li><b>¥</b><span class='fw'>"+numArray.price+"</span></li>"+ "<li class='w100'><a class='minus' onClick='minus(this);' href='javascript:void(0);'>-</a>"+ "<input value='1' class='listNum' /><a class='add' onClick='add(this)' href='javascript:void(0);'>+</a><p>有货</p></li>"+ "<li class='w100'><b>¥</b><span id='sub' class='fw'>"+numArray.price*numArray.quentity+"</span></li>"+ "<li><a style='border:none;color:#666;' href='javascript:void(0);'>删除</a></li>"+ "</ul></div></div>" $(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); } </script>
因为时间原因,代码没有进行优化,但是效果还是先给大家呈现出来。希望可以帮到更多的技术爱好者和朋友!如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 使用Ajax、json实现京东购物车结算界面的数据交互
- struts2使用ajax实现页面和action之间通过json数据交互
- Ajax 使用 json 进行数据交互,实现 级联菜单功能
- 利用ajax实现与php(json数组)数据交互,并局部刷新页面
- Highcharts、AJAX、JSON、JQuery实现动态数据交互显示图表柱形图
- jQuery的ajax()检验用户名;通过jQuery的load()/get()/post()方法实现;使用XMLHTTPRequest对象来进行AJAX的异步数据交互
- EasyUI+Ajax+Json+一般处理程序实现数据的前台与后台的交互
- Ajax实现异步操作实例_针对JSON格式的请求数据
- JSON 、使用JSON实现数据交换 、jQuery对AJAX的支持
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图
- SpringMVC(27):json数据的传递处理的示例(实现功能:使用jQuery框架的ajax()方法实现用户信息查看)
- Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- ajax与json 获取数据并在前台使用简单实例
- ajax提交json数据并使用Springmvc接收实例
- AJAX Unit02: JSON 、 使用JSON实现数据交换 、 jQuery对AJAX的支持
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互