购物车ajaxphpjson,Ajax+json实现购物车结算

这次给大家带来Ajax&＃43;json实现购物车结算&＃xff0c;Ajax&＃43;json实现购物车结算的注意事项有哪些&＃xff0c;下面就是实战案例&＃xff0c;一起来看一下。

• 全选
• 商品

• 单价
• 数量
• 小计
• 操作

• 全选
• 删除选中产品

总价&＃xff1a;&＃xffe5;0

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 &＃61; data.list;//拿到list数组

//console.log(list);

for(var i&＃61;0;i

var numArray &＃61; list[i];

numArray.price &＃61; (numArray.price).toFixed(2);

var text &＃61; "

"&＃43;

""&＃43;

"

"&＃43;

""&＃43;numArray.description&＃43;"

购买礼品服务

"

"&＃43;

""&＃43;numArray.color&＃43;"

"

"&＃43;

"

• &＃xffe5;"&＃43;numArray.price&＃43;""&＃43;

"

"&＃43;

有货

"

"

"

$(text).appendTo(".goodsListbox");

}

},

error:function(){

console.log("调用数据失败&＃xff01;");

}

});

var listNum,price,sums,sub1,sub2;

function add(obj){

listNum &＃61; $(obj).prev().val();//input值

listNum &＃61; parseInt(listNum);

var num &＃61; parseInt(listNum&＃43;1);//input值每次&＃43;1

$(obj).prev().val(num);

price &＃61; $(obj).parent().prev().children(&＃39;span&＃39;).text();//找到单价

price &＃61; parseInt(price);//转换成number类型

price &＃61; price.toFixed(2);

sums &＃61; $(obj).parent().next().children(&＃39;span&＃39;).text()//找到总金额

sums &＃61; parseInt(sums);

console.log(typeof sums);

$(obj).parent().next().children(&＃39;span&＃39;).text(price*num);

sub1 &＃61; $(".goodsList_content:eq(0)").find("#sub").text();

sub2 &＃61; $(".goodsList_content:eq(1)").find("#sub").text();

sub1 &＃61; parseInt(sub1);

sub2 &＃61; parseInt(sub2);

var res &＃61; $(".checkoutright .checkoutSum").text((sub1&＃43;sub2).toFixed(2));

}

function minus(obj){

listNum &＃61; $(obj).next().val();

listNum &＃61; parseInt(listNum);

if(listNum<&＃61;1){

listNum&＃61;&＃61;1;

}else{

--listNum;

}

$(obj).next().val(listNum);

price &＃61; $(obj).parent().prev().children(&＃39;span&＃39;).text();//找到单价

price &＃61; parseInt(price);//转换成number类型

price &＃61; price.toFixed(2);

sums &＃61; $(obj).parent().next().children(&＃39;span&＃39;).text()//找到总金额

sums &＃61; parseInt(sums);

$(obj).parent().next().children(&＃39;span&＃39;).text(price*listNum);

$(".checkoutright .checkoutSum").text(price*listNum);

sub1 &＃61; $(".goodsList_content:eq(0)").find("#sub").text();

sub2 &＃61; $(".goodsList_content:eq(1)").find("#sub").text();

sub1 &＃61; parseInt(sub1);

sub2 &＃61; parseInt(sub2);

$(".checkoutright .checkoutSum").text(sub1&＃43;sub2);

}

相信看了本文案例你已经掌握了方法&＃xff0c;更多精彩请关注php中文网其它相关文章&＃xff01;

推荐阅读&＃xff1a;