简单的前端js+ajax 购物车框架(入门篇)
发布时间:2024-04-23 09:29:52
标签:ajax,购物车
今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望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,搞定!!
0
投稿
猜你喜欢
- 一,VSCODE配置Markdown 打开左侧的extensions,或者使用 Ctrl+Shift+X,输入Markdown(1
- 相信大家都做过九宫格的游戏,规则是要求填数字1-9在九个方格内,使横竖斜相加和相等。只填九个那可能有些简单,但是填25个,填49个,81个等
- 如下所示:import cv2import os#图片路径im_dir = '/home/suanfa/data/out/20170
- 正文本文简要介绍Python自然语言处理(NLP),使用Python的NLTK库。NLTK是Python的自然语言处理工具包,在NLP领域中
- 第一章:霍夫变换检测圆① 实例演示1这个是设定半径范围 0-50 后的效果。② 实例演示2这个是设定半径范围 50-70 后的效果,因为原图
- 本文参加新星计划人工智能(Pytorch)赛道:https://bbs.csdn.net/topics/613989052一、Mnist 分
- 上下班打卡是程序员最讨厌的东西,更讨厌的是设置了连上指定wifi打卡。手机上有一些定时机器人之类的app,经过实际测试,全军覆没,没一个可以
- 字典是Python语言中唯一的映射类型。映射类型对象里哈希值(键,key)和指向的对象(值,value)是一对多的的关系,通常被认为是可变的
- 这是一条颠覆常规的插入方法,一条INSERT语句可以完成向多张表的插入任务。小小地展示一下这种插入方法。1.创建表T并初始化测试数据,此表作
- 下载下面提供两种下载地址,官网地址一般为最新的,网盘地址会定期更新,但是不保证一定是最新的官网下载地址:https://www.jetbra
- Dataframe使用loc取某几行几列的数据:print(df.loc[0:4,['item_price_level',&
- 有很多程序运行时间比较长,如果不将运行过程输出将很难判断程序运行的时间。下边这段程序将按照上图所示的格式输出程序运行进程、已用时间、剩余时间
- 本文描述通过统计分析出医院信息系统需分区的表,对需分区的表选择分区键,即找出包括在你的分区键中的列(表的属性),对大型数据的管理比较有意义,
- 用python来自动生成excel数据文件。python处理excel文件主要是第三方模块库xlrd、xlwt、xluntils和pyExc
- Python中对象方法的定义很怪异,第一个参数一般都命名为self(相当于其它语言的this),用于传递对象本身,而在调用的时候则不必显式传
- 如何用SysOjects来获知数据库的信息?SysObjects中就保存了数据库中所有对象的信息,如:SELECT * FROM SysOb
- 定位原理很简单,故不赘述,直接上源码,内附注释。(如果对您的学习有所帮助,还请帮忙点个赞,谢谢了)#!/usr/bin/env python
- Python是数据分析的强大利器。利用Python做数据分析,第一步就是学习如何读取日常工作中产生各种excel报表并存入数据中,方便后续数
- 1. XML简介XML(eXtensible Markup Language)指可扩展标记语言,被设计用来传输和存储数据,已经日趋成为当前许
- 一、介绍这篇文档旨在介绍如何安装配置基于2台服务器的MySQL集群。并且实现任意一台服务器出现问题或宕机时MySQL依然能够继续运行。虽然这