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

<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>

 因为时间原因，代码没有进行优化，但是效果还是先给大家呈现出来。希望可以帮到更多的技术爱好者和朋友！