侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

使用Ajax、json实现京东购物车结算界面的数据交互实例

前端  /  管理员 发布于 3年前   256


<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='//article/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=''>-</a>"+         "<input value='1' class='listNum' /><a class='add' onClick='add(this)' href=''>+</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=''>删除</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>

因为时间原因,代码没有进行优化,但是效果还是先给大家呈现出来。希望可以帮到更多的技术爱好者和朋友!如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站的支持!


  • 上一条:
    Python插入Elasticsearch操作方法解析
    下一条:
    使用perl清理电脑上重复文件实现代码(续)
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 在js的websocket客户端开发中遇到代码割裂情况解决方案(0个评论)
    • 在uni-app中使用Ucharts柱状图地步横向滚动条无法滑动解决方式(0个评论)
    • 在vue中实现移动端双指放大或缩小功能代码示例(0个评论)
    • jq中实现图片压缩、base64转成file后上传至服务器示例(0个评论)
    • 在JavaScript中实现批量下载OSS中的文件代码示例(0个评论)
    • 近期文章
    • goose数据库迁移工具介绍及使用流程步骤(0个评论)
    • 中国程序员“翻墙”为海外软件公司打工,105.8万工资被罚没!转知乎(0个评论)
    • 在go语言gin框架中使用Sharding(Gorm分表中间件)实现分表流程步骤(0个评论)
    • 在PHP提高性能方式之开启OPCache扩展及OPCache配置参数详解(0个评论)
    • 在js的websocket客户端开发中遇到代码割裂情况解决方案(0个评论)
    • Laravel框架中适用于Eloquent的日期过滤软件包:lara-date-filter(0个评论)
    • Laravel 10.24版本发布(0个评论)
    • go语言多项目批量更新依赖及自动调用jenkins构建流程步骤(0个评论)
    • 在go语言中实现数学pow(x^y 的幂次)代码示例(0个评论)
    • Laravel应用程序性能监控 (APM) 工具:Scout (0个评论)
    • 近期评论
    • 路人 在

      php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..
    • 博主 在

      科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试,免费ssr是没那么稳..
    • mashrdn 在

      科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 V2rayn免费节点添加上去了,youtobe无法打开网页,是怎么回事..
    • 张伟 在

      科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 3q!有用,不过免费节点隔天就要去git上复制新的导进去..
    • 博主 在

      科学上网翻墙访问Google , 上外网神器佛跳墙VPN(永久免费)使用流程步骤中评论 该篇教程已不能用了,告知大家,免的老有老铁问我!..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客