Home > Web Front-end > JS Tutorial > body text

Ajax+json realizes shopping cart settlement

php中世界最好的语言
Release: 2018-04-02 14:06:22
Original
2325 people have browsed it

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>
Copy after login
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;
}
Copy after login
<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>
Copy after login
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template