javascript+ajax購物車實現方法

//為了省事，就沒寫自己的js ajax了 用了jquery的，當然你也可以添加到jquery的擴充方法內,哈哈，我太懶了，所以就寫這裡了。

代碼如下

複製代碼

var _$ = { AJAX: function (urlparm, d, beforecall, successcall) { $.ajax({ url: "ashx/ajax_shoppingCart.ashx?" + urlparm, data:d, dataType:"Json", type: "POST", before: beforecall, success:successcall }); } }; (function () { var Jusoc = {}; Jusoc = { _inital: function () { window.Jusoc = Jusoc; }, Base: {}, DAO: {}, BLL: {}, UI: {} } Jusoc.Base = { Validate: { } } //AJAX() Jusoc.DAO = { Shopping: { Get: function (beforecall, successcall) { _$.AJAX("action=get", null, beforecall, successcall); }, Remove: function (pid, beforecall, successcall) { _$.AJAX("action=remove", { "pid": pid }, beforecall, successcall); }, Add: function (pid, pcount, beforecall, successcall) { _$.AJAX("action=add", { "pid": pid, "pcount": pcount }, beforecall, successcall); }, Set: function (pid, pcount, beforecall, successcall) { _$.AJAX("action=set", { "pid": pid, "pcount": pcount }, beforecall, successcall); } } } Jusoc.BLL = { Shopping: (function () { var Data = null; var isLock = false; var _successcall = null; var _beforecall = null; function Unlock() { isLock = false; } function Lock() { isLock = true; if(Data&&Data !=null) { Data = null; } } function CallBackFunction(xhr) { Unlock(); // if (xhr[0] == "ERROR") { // alert(xhr[1]); // return; // } // else if (xhr[0] == "SUCCESS") { // Jusoc.BLL.Shopping.SetData(xhr[1]); // } Jusoc.BLL.Shopping.SetData(xhr); if (_successcall != null && _successcall) { _successcall.call(window, xhr); } _successcall = null; } function PrepareRequst(beforecall, successcall) { if (isLock) { return false; } Lock(); if (beforecall != null && beforecall) { _beforecall = beforecall; } if (successcall != null && successcall) { _successcall = successcall; } } return { Get: function (beforecall, successcall) { if(PrepareRequst(beforecall, successcall)==false)return false; Jusoc.DAO.Shopping.Get(_beforecall, CallBackFunction); }, Remove: function (pid, beforecall, successcall) { if(PrepareRequst(beforecall, successcall)==false)return false; Jusoc.DAO.Shopping.Remove(pid, _beforecall, CallBackFunction); }, Set: function (pid, pcount, beforecall, successcall) { if(PrepareRequst(beforecall, successcall)==false)return false; Jusoc.DAO.Shopping.Set(pid, pcount, beforecall, CallBackFunction); }, Add: function (pid, pcount, beforecall, successcall) { if(PrepareRequst(beforecall, successcall)==false)return false; Jusoc.DAO.Shopping.Add(pid, pcount, _beforecall, CallBackFunction); }, GetData: function () { //alert(Data); return Data; }, SetData: function (data) { Data = data; }, RemoveData: function () { if (Data != null && Data) Data= null; } } })(), XHR: { } } Jusoc.UI = { ShoppingCart: (function () { function Constract() { Jusoc.BLL.Shopping.Get(null,SetShoppingCart); } function SetShoppingCart(data) { //這裡來填充購物車中的資料 var data = Jusoc.BLL.Shopping.GetData(); //這裡 先構建 整個的購物車 var html = "<table class="shoppingcart-list" id="sm">"+ "<tr>"+ "<th>"+ "書啊"+ "</th>"+ "<th>"+ "書名"+ "</th>"+ "<th>"+ " 單價"+ "</th>"+ "<th>"+ " 數量"+ "</th>"+ "<th>"+ " 操作"+ "</th>"+ "</tr>"; for(var i =0;i<data.length;i++) { html += "<tr>"+ "<td>"+ "<img src="ss" height="36px" width="28px"/>"+ "</td>"+ "<td>"+ data[i].Name+ "</td>"+ "<td>"+ "￥"+data[i].Money+ "</td>"+ "<td>"+ "<div class="item-change">"+ "<input type="text" value='"+data[i].Count+"' />"+ "<span title="數量加一" class="add" onclick="Jusoc.UI.ShoppingCart.Plus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])"></span> <span "+ "title="數量減一" class="cut" onclick="Jusoc.UI.ShoppingCart.Minus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])"></span>"+ "</div>"+ "</td>"+ "<td>"+ "<span class="RemoveLink" onclick="Jusoc.UI.ShoppingCart.Remove(1,this.parentNode.parentNode)">Remove From Cark</span>"+ "</td>"+ "</tr>"; } html+="</table>"; document.body.innerHTML+=html; } function AddToPanel(data) { //這裡是對 添加一個商品到購物車 來修改前台樣式 var obj = document.getElementById("sm"); var html = "<td>"+ "<img src="soo" height="36px" width="28px"/>"+ "</td>"+ "<td>"+ data.Name+ "</td>"+ "<td>"+ "￥"+data.Money+ "</td>"+ "<td >"+ "<div class="item-change">"+ "<input type="text" value='"+data.Count+"' />"+ "<span title="數量加一" class="add" onclick="Jusoc.UI.ShoppingCart.Plus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])"></span> <span "+ "title="數量減一" class="cut" onclick="Jusoc.UI.ShoppingCart.Minus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])"></span>"+ "</div>"+ "</td>"+ "<td>"+ "<span class="RemoveLink" onclick="Jusoc.UI.ShoppingCart.Remove(1,this.parentNode.parentNode)">Remove From Cark</span>"+ "</td>"; var row = obj.insertRow(1); row.innerHTML = html; return; obj.childNodes[0].innerHTML += html; } function UpdatePanel(obj, count) { //這裡是從購物車中 增加 或者 減少 修改操作 obj.value = count; } function RemoveFromPanel(child) { var obj = document.getElementById("sm"); obj.childNodes[0].removeChild(child); } return { PageLoad: function () { Constract(); }, Add: function (pid, pcount) { Jusoc.BLL.Shopping.Add(pid,pcount, null, AddToPanel); }, Plus: function (pid, pcount, obj) { pcount = parseInt(pcount) + 1; Jusoc.BLL.Shopping.Set(pid, pcount, function () { alert("before") }, function (data) { UpdatePanel(obj, pcount) }); }, Minus:function(pid,pcount,obj){ pcount = parseInt(pcount) - 1; Jusoc.BLL.Shopping.Set(pid,pcount,null,function(data){ UpdatePanel(obj,pcount)}); }, Remove:function(pid,obj){ Jusoc.BLL.Shopping.Remove(pid,null,function(data){ RemoveFromPanel(obj);}); } } })() } Jusoc._inital(); })() 執行個體 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> *{margin:0; padding:0;border:0} body{font-size: .85em;font-family: Verdana,Helvetica,SimSun,Arial, "Arial Unicode MS" ,MingLiu,PMingLiu, "MS Gothic" ,sans-serief;color: #232323;text-align:center; font-size:12px; background-color: #fff;} #ltRight {width: 722px;float: left;position: relative;padding: 16px 40px;text-align:left} /*shoppingcart-list*/ .shoppingcart-list{border: 1px solid #C2D8ED;border-collapse: collapse;color: #666666;width: 750px;} .shoppingcart-list th{background-color: #F1F7F9;color: #666;font-size: 13px;text-align: center;} .shoppingcart-list tr{border: 1px solid #C2D8ED;line-height: 25px;text-align:center;} .shoppingcart-list tr:hover{background-color: #fff;} th, td{padding-left: 5px;} .item-change{font: 12px/74px Arial;text-align: center;width: 58px;padding: 28px 0 0 25px;height: 46px;} .item-change input{width: 36px;height: 19px;border: 1px solid #C4C4C4;background: white;float: left;margin-top: 1px;text-align: center;line-height: 19px;margin-right: 1px;font-size: 12px;} .item-change span{width: 17px;height: 8px;float: left;display: block;margin-top: 1px;font-size: 0;line-height: 0;border: 1px solid #C9C9C9;text-indent: -9999px; cursor:pointer} .item-change .add{background: url(Images/leftmenu/icon_cart.gif) no-repeat 6px -58px;} .item-change .cut{background: url(Images/leftmenu/icon_cart.gif) no-repeat 6px -67px;} .box_window {width: 204px;position:absolute;left:-9999px;} .box_window .updateTip{width: 184px;border: solid 1px #DFC9B2;background-color: #FDF2E3;line-height: 20px;padding: 11px 8px 8px;} .t_c {text-align: center;} .c_red_s {color: #C30;font-weight: bold;} .box_window .c_b {width: 9px;height: 6px;margin: 0 auto;background: url(Images/leftmenu/p_window_b.gif) no-repeat;position: relative;margin-top: -1px;font-size: 0;overflow: hidden;} .RemoveLink{ cursor:pointer} </style> <script src="../js/jquery-1.6.js" type="text/javascript"></script> <script src="Js/base.Jusoc.js" type="text/javascript"></script> <script type="text/javascript"> window.onload =function () { Jusoc.UI.ShoppingCart.PageLoad(); } </script> </head> <body> <div id="ltRight"> <h5 class="htitle"> 購物車 <span style="float:right; padding-right:20px;">總金額：￥<em id="cart-total"></em></span> </h5> <div id="update-message" style="text-align: left; text-indent: 48px; font-weight: bold; padding: 6px;"> </div> <div id="item-tip" class="box_window"> <div class="updateTip"> <p class="t_c"> 修改成功！</p> <p> 您的商品總金額為￥<span class="c_red_s" id="update_total_account">@Model.Total.ToString("0.00")</span>元</p> <p class="t_c"> <a href="javascript:void(0)" onclick="$('#item-tip').css('left','-9999px');">關閉</a></p> </div> <div class="c_b"> </div> </div> <h5><a href="javascript:Jusoc.UI.ShoppingCart.Add(1,1)">Add one to Shopping Cart</a></h5> </div> </body> </html>