Ajax+json realizes shopping cart settlement

This time I will bring you Ajax+json to realize shopping cart settlement. What are the precautions for Ajax+json to realize shopping cart settlement? The following is a practical case, let’s take a look.

<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=&#39;goodsListbox&#39;></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=&#39;goodsList_content&#39;><p class=&#39;fl buy_goods&#39;>"+
         "<input class=&#39;fl&#39; style=&#39;margin:15px 10px 0 10px;&#39; type=&#39;checkbox&#39; name=&#39;&#39; />"+
         "<img align=&#39;top&#39; src=&#39;images/1.jpg&#39; /><p class=&#39;disl&#39;>"+
         "<span>"+numArray.description+"</span><p class=&#39;f12&#39;>购买礼品服务</p></p>"+
         "<p class=&#39;disl&#39; style=&#39;width:auto;position:absolute;right:-100px;top:0;&#39;>"+
         "<span>"+numArray.color+"</span></p></p>"+
         "<p class=&#39;fr goodsListnum&#39; style=&#39;margin-top:-12px;&#39;>"+
         "<ul><li><b>￥</b><span class=&#39;fw&#39;>"+numArray.price+"</span></li>"+
         "<li class=&#39;w100&#39;><a class=&#39;minus&#39; onClick=&#39;minus(this);&#39; href=&#39;javascript:void(0);&#39;>-</a>"+
         "<input value=&#39;1&#39; class=&#39;listNum&#39; /><a class=&#39;add&#39; onClick=&#39;add(this)&#39; href=&#39;javascript:void(0);&#39;>+</a><p>有货</p></li>"+
         "<li class=&#39;w100&#39;><b>￥</b><span id=&#39;sub&#39; class=&#39;fw&#39;>"+numArray.price*numArray.quentity+"</span></li>"+
         "<li><a style=&#39;border:none;color:#666;&#39; href=&#39;javascript:void(0);&#39;>删除</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(&#39;span&#39;).text();//找到单价
    price = parseInt(price);//转换成number类型
    price = price.toFixed(2);
    sums = $(obj).parent().next().children(&#39;span&#39;).text()//找到总金额
    sums = parseInt(sums);
    $(obj).parent().next().children(&#39;span&#39;).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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to communicate data between C and View

How to solve the status=parsererror error reported during Ajax interaction

The above is the detailed content of Ajax+json realizes shopping cart settlement. For more information, please follow other related articles on the PHP Chinese website!