简单的前端js+ajax 购物车框架(入门篇)


Posted in Javascript onOctober 29, 2011

今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望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 = "<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(); 
})()

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

HTML:

<!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>

ashx:这个我就不就木有必要黏贴出来了,根据自己的业务去写额。

总结:OK,搞定!!

Javascript 相关文章推荐
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
javascript 可以拖动的DIV(二)
Jun 26 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
vuex的使用步骤
Jan 06 Vue.js
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 #Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 #Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 #Javascript
基于jquery的无限级联下拉框js插件
Oct 29 #Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 #Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 #Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 #Javascript
You might like
PHP 错误之引号中使用变量
2009/05/04 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
动态样式类封装JS代码
2009/09/02 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
卫校毕业生自我鉴定
2013/10/31 职场文书
中学家长会邀请函
2014/02/03 职场文书
小组口号大全
2014/06/09 职场文书
北京奥运会口号
2014/06/21 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书