京东ajax怎么用,使用Ajax、json实现京东购物车结算界面的数据交互实例
- 全選
- 商品
- 單價(jià)
- 數(shù)量
- 小計(jì)
- 操作
- 全選
- 刪除選中產(chǎn)品
總價(jià)：￥0
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;
}
/*內(nèi)容*/
.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;
}
/*底部結(jié)賬*/
.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 = data.list;//拿到list數(shù)組
//console.log(list);
for(var i=0;i
var numArray = list[i];
numArray.price = (numArray.price).toFixed(2);
var text = "
"+""+
"
"+""+numArray.description+"
購(gòu)買(mǎi)禮品服務(wù)
"+"
"+""+numArray.color+"
"+"
"+"
- ￥"+numArray.price+""+
"
-"+"+
有貨
"+"
￥"+numArray.price*numArray.quentity+""+"
刪除"+"
"$(text).appendTo(".goodsListbox");
}
},
error:function(){
console.log("調(diào)用數(shù)據(jù)失敗！");
}
});
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();//找到單價(jià)
price = parseInt(price);//轉(zhuǎn)換成number類(lèi)型
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();//找到單價(jià)
price = parseInt(price);//轉(zhuǎn)換成number類(lèi)型
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);
}
因?yàn)闀r(shí)間原因，代碼沒(méi)有進(jìn)行優(yōu)化，但是效果還是先給大家呈現(xiàn)出來(lái)。希望可以幫到更多的技術(shù)愛(ài)好者和朋友！如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)網(wǎng)站的支持！
總結(jié)
以上是生活随笔為你收集整理的京东ajax怎么用,使用Ajax、json实现京东购物车结算界面的数据交互实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： java8新生代_jdk8.0的jvm详
- 下一篇： 判读一个对象不为空_ArrayList实