使用Ajax、json實現京東購物車結算介面的資料互動實例（圖文教學）-js教程-PHP中文網

首頁

web前端

js教程

使用Ajax、json實現京東購物車結算介面的資料互動實例（圖文教學）

亚连

May 22, 2018 pm 04:44 PM

ajaxjavascriptjson

這篇文章主要介紹了使用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=&#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; / alt="使用Ajax、json實現京東購物車結算介面的資料互動實例（圖文教學）" ><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(&#39;span&#39;).text();//找到单价
    price = parseInt(price);//转换成number类型
    price = price.toFixed(2);
    sums = $(obj).parent().next().children(&#39;span&#39;).text()//找到总金额
    sums = parseInt(sums);
    console.log(typeof sums);
    $(obj).parent().next().children(&#39;span&#39;).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>

上面是我整理給大家的，希望今後會對大家有幫助。

基於CORS實作WebApi Ajax 跨網域請求解決方法

ajax前台後台跨網域請求處理方式（圖文教程）

原生JS實作Ajax跨域請求flask回應內容（圖文教學）

以上是使用Ajax、json實現京東購物車結算介面的資料互動實例（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。