这篇文章主要介绍了使用ajax、json实现京东购物车结算界面的数据交互实例,非常不错，具有参考借鉴价值，需要的朋友可以参考下
<p class="goodslist_menu">
<p class="goodslist">
<p class="goodslistfl">
<input class="fl" style="margin:15px 10px 0 10px;" type="checkbox" name="" />
<ul>
<li>全选</li>
<li>商品</li>
</ul>
</p>
<p class="goodslistfr fr">
<ul>
<li>单价</li>
<li class="w100">数量</li>
<li class="w100">小计</li>
<li>操作</li>
</ul>
</p>
</p>
<!--内容-->
<p class='goodslistbox'></p>
<p class="checkout">
<p class="checkoutleft">
<input class="fl" style="margin:21px 10px 0 10px;" type="checkbox" name="" />
<ul>
<li>全选</li>
<li>删除选中产品</li>
</ul>
</p>
<p class="checkoutright fr">
<span>总价：<b>￥</b></span><span class="checkoutsum">0</span>
<input type="button" value="去结算" />
</p>
</p>
</p>
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 = "<p class='goodslist_content'><p class='fl buy_goods'>"+
"<input class='fl' style='margin:15px 10px 0 10px;' type='checkbox' name='' />"+
"<img align='top' src='images/1.jpg' /><p class='disl'>"+
"<span>"+numarray.description+"</span><p class='f12'>购买礼品服务</p></p>"+
"<p class='disl' style='width:auto;position:absolute;right:-100px;top:0;'>"+
"<span>"+numarray.color+"</span></p></p>"+
"<p 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></p></p>"
$(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>
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
基于cors实现webapi ajax 跨域请求解决方法
ajax前台后台跨域请求处理方式（图文教程）
原生js实现ajax跨域请求flask响应内容（图文教程）
以上就是使用ajax、json实现京东购物车结算界面的数据交互实例（图文教程）的详细内容。