简单的前端js ajax 购物车框架(入门篇)_javascript技巧-js教程-PHP中文网

今天在公司实在没有事做，突然就想到写下商城的购物车的前端框架，当然我这里只有购物车的增删改查，也许写的并不是那么完善，但最重要的是一个入门，也希望js达人给些建议，好让我更上一个台阶。
HOHO~~~开始咯：
Js：

//为了省事，就没写自己的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 = ""+
""+
""+
""+
""+
""+
""+
"";
for(var i =0;i{
html += ""+
""+
""+
""+
""
""
"";
}
html ="

"+ "书啊"+ "	"+ "书名"+ "	"+ " 单价"+ "	"+ " 数量"+ "	"+ " 操作"+ "
"+ ""+ "	"+ data[i].Name+ "	"+ "￥"+data[i].Money+ "	"+ " "+ ""+ " "title=\"数量减一\" class=\"cut\" onclick=\"Jusoc.UI.ShoppingCart.Minus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])\">"+ " " "	" "Remove From Cark" "

";
document.body.innerHTML =html;
}
function AddToPanel(data) {
//这里是对添加一个商品到购物车来修改前台样式
var obj = document.getElementById("sm");
var html = ""
"

"
""
""
data.Name
""
""
"￥" data.Money
""
""
"

"
""
" "title="数量减一" class="cut" onclick="Jusoc.UI.ShoppingCart.Minus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])">"
"

"
""
""
"Remove From Cark"
"";
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();
})()

　　Tips:这里的显示页面仅仅是demo，如需要，可以自己定制。
　　HTML：

复制代码代码如下:

<头>
<标题>

*{边距：0; padding:0;border:0}
body{font-size: .85em;font-family: Verdana,Helvetica,SimSun,Arial, "Arial Unicode MS" ,MingLiu,PMingLiu, "MS Gothic" ,sans-serief ;颜色：#232323;文本对齐：居中;字体大小：12px；背景颜色：#fff;}
#ltRight {宽度：722px；浮动：左；位置：相对；填充：16px 40px；文本对齐：左}
/*购物车列表*/
.shoppingcart-list{边框：1px实体#C2D8ED;边框折叠：折叠;颜色：#666666;宽度：750px;}
.shoppingcart-list th{背景颜色：#F1F7F9;颜色：#666;字体-size: 13px;text-align: center;}
.shoppingcart-list tr{border: 1pxsolid #C2D8ED;line-height: 25px;text-align:center;}
.shoppingcart-list tr:悬停{背景颜色：#fff;}
th，td{padding-left：5px;}
.item-change{字体：12px/74px Arial;文本对齐：中心;宽度：58px;padding : 28px 0 0 25px;高度: 46px;}
.item-change input{宽度: 36px;高度: 19px;边框: 1px 实心 #C4C4C4;背景: 白色;浮动: 左;边距顶部: 1px;文本-align: center;line-height: 19px;margin-right: 1px;font-size: 12px;}
.item-change span{width: 17px;height: 8px;float: left;display: block;margin -顶部：1px；字体大小：0；行高：0；边框：1px实线#C9C9C9；文本缩进：-9999px；光标：指针}
.item-change .add{背景：url(Images/leftmenu/icon_cart.gif) 无重复 6px -58px;}
.item-change .cut{背景：url(Images/ leftmenu/icon_cart.gif) 无重复 6px -67px;}
.box_window {宽度：204px;位置：绝对；左：-9999px;}
.box_window .updateTip{宽度：184px;边框：实心 1px #DFC9B2;背景颜色：#FDF2E3;行高：20px;填充：11px 8px 8px;}
.t_c {文本对齐：居中;}
.c_red_s {颜色：#C30;字体粗细: 粗体;}
.box_window .c_b {宽度: 9px;高度: 6px;边距: 0 auto;背景: url(Images/leftmenu/p_window_b.gif) 不重复;位置: 相对;边距顶部: - 1px;字体大小: 0;溢出:隐藏;}
.RemoveLink{ 光标:指针}
;
<脚本 src="../js/jquery-1.6.js" type="text/javascript">

window.onload =function () {
Jusoc.UI.ShoppingCart.PageLoad();
}

<身体>