简单的前端js+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>