学院首页>网络编程>ASP>在线购物网站中“手推车”的实现

在线购物网站中“手推车”的实现

作者:未知 来源:未知 添加时间:2006-5-21 10:29:31
 现在INTERNET上出现了很多的在线购物网站,大大的方便了网民们的在线购物需求。凡是在线购物网站(零售)中少不了的一项功能就是“购物篮”或叫“手推车”。本文就是探讨怎样实现“手推车”功能的。要想在网站上实现“手推车”功能,有好几种方法,比如用SESSION,COOKIE,隐藏侦等。这几种方法各有优缺点,这里着重讨论用COOKIE来实现“手推车”功能。COOKIE是通过服务器端CGI或脚本或者客户端脚本用来把信息保存在客户机上,以便为服务器或客户机再次使用这些信息提供方便。在JAVASCRIPT中有一些专门用来对COOKIE进行操作的函数,如设置COOKIE值的Setcookie(name,value),删除COOKIE的Deletecookie(name)等(详细见源码)。使用COOKIE来保存“手推车”信息的优点是,即使当用户不小心关闭了浏览器窗口,“手推车”中的信息也不会丢失,并且它占用很少的服务器端资源,缺点是必须要求用户端浏览器支持COOKIE并且打开它。

 对于一个“手推车”其实就是实现以下几项功能。
 一、把商品添加到“手推车”,就是订购。
 二、从“手推车”中删掉已订购的商品。
 三、修改“手推车”中某一商品的数量。
 四、清空“手推车”。
 五、显示,统计“手推车”中的商品。

 首先让我们来看看怎样实现往“手推车”中添加商品。非常简单,就是把某一商品的信息(名称,价格,数量,折扣等)写入COOKIE即可。其实这里不必把商品的所有信息都写入COOKIE,只要记下商品在数据库中编号或ID(这里用CATID表示)与商品的数量就可以了。在显示“手推车”信息时根据CATID可以从商品数据库中查询出这种商品的所有具体信息。往“手推车”中添加商品的实现方法如下,Addcat(catid,number)。
function Addcat(catid,number){  //把商品添加到“手推车”函数
if (number<=0)Deletecookie("mycat"+catid); //如果商品的数量少于等于0则删除该商品
else
Setcookie("mycat"+catid,catid+","+number); //把商品ID与数量写入COOKIE

var cat=window.open("showcat.asp","cat","toolbar=no,menubar=no,location=no,status=no,width=420,height=280"); //打开一新窗口来显示与统计商品信息,即显示“手推车”
}

 从“手推车”中删掉商品,也就是把COOKIE中的该商品信息删除掉,调用Deletecat(catid)即可。
function Deletecat(catid){
Deletecookie("mycat"+catid); //从COOKIE中删除
var cat=window.open("showcat.asp","cat","toolbar=no,menubar=no,location=no,status=no,width=420,height=280"); //在CAT窗口显示与统计商品信息,即刷新显示“手推车”
}

 修改“手推车”中某一商品的数量的原理跟第一点把商品添加到“手推车”中是一样的,只不过把商品的数量修改成现在所要的数量即可。

 下面来看看如何显示与统计“手推车”中的商品信息。由Showcat.asp实现。
显示的效果如下图所视。
这里使用了ASP中Request.Cookies集合。Request.Cookies用来检索客户中COOKIE值。我们通过遍历 Cookies 集合中的所有 cookie 值取出我们的“手推车”的信息。然后从中分离出商品ID与商品数量,这里使用了VBscript中的SPLIT函数,SPLIT函数返回基于 0 的一维数组,其中包含指定数目的子字符串。
 取出商品ID与商品数量后再根据商品ID从商品数据库中查询出该商品的具体信息,最后输出商品的名称、单价、折扣、数量、小计等,并累计商品总件数与商品总金额。

Showcat.asp
<html><head><title>Cat</title></head>
<body>
<form name=cat>
<table border="1" width="360" cellspacing="0" cellpadding="3" bordercolorlight="#FFFFFF" bordercolor="#008000">
  <tr>
 <td width="100%" colspan="5" align="center"><b>您的手推车信息</b></td>
  </tr>
  <tr>
 <td width="45">名称</td>
 <td width="45">单价</td>
 <td width="45">折扣</td>
 <td width="45">数量</td>
 <td width="45">小计</td>
 <td width="135"> </td>
</tr>

<% dim conn,rs,sqlstr,cook,catid,number,sum,allnum,i
i=0
set conn=server.createobject("ADODB.CONNECTION") '建立数据库ADO连接实例
conn.open "DSN","USERID","PWD" '打开数据库连接
set rs=Server.CreateObject("ADODB.Recordset") '建立数据库ADO记录集连接实例

for each cook in request.cookies '遍历 Cookies 集合
if instr(cook,"mycat") then '判断是否“手推车”信息
catid=split(request.cookies(cook),",")[0] '分离出商品ID
number=split(request.cookies(cook),",")[1] '分离出商品数量
sqlstr="select * from cat where id="&catid&"" 'SQL查询语句
rs.open conn,sql,1,3 '执行查询,产生记录集
xiaoji=rs("单价")*rs("折扣")*number '计算小计

response.write "<tr><td width=45 ><font size=2 color=#800080>"&rs("名称")&"</font></td>"
response.write "<td width=45 ><font size=2 color=#800080>"&rs("单价")&"</font></td>"
response.write "<td width=45 ><font size=2 color=#800080>"&rs("折扣")&"</font></td>"
response.write "<td width=45 ><input type=text name=number"&i&" value="&number&" size=4></td>"
response.write "<td width=45 ><font size=2 color=#800080>"&xiaoji&"</font></td>"
response.write "<td width=135><input type=button value=更新 onclick=Addcat("&rs("ID")&",document.cat.number"&i&".value)> <input type=button value=删除 onclick=Deletecat("&rs("ID")&")></td></tr>

allnum=allnum+number '累计商品总件数
sum=sum+xiaoji '累计总金额
rs.close
i=i+1
end if
next
set rs=nothing
set conn=nothing
%>
  <tr>
 <td width="45">合计</td>
 <td width="45"> </td>
 <td width="45"> </td>
 <td width="45"><%=allnum%></td>
 <td width="45"><%=sum%></td>
 <td width="135"><%=sum%></td>
  </tr>
  <tr>
 <td width="360" colspan="6"> <font size="2"><a href="checkout.asp"><font color="#FF0000">结帐</font></a> 
<a href=javascript:window.close()><font color="#008000">继续购物</font></a></font> <a href=javascript:Clearcookie()><font size="2" color="#0000FF">清空“手推车”</font></a></td>
  </tr>
</table>
</form>
</body>
</html>


javascript中操作COOKIE的函数源码如下:

function Setcookie (name, value) {  //设置名称为name,值为value的Cookie
  var argc = SetCookie.arguments.length;
  var argv = SetCookie.arguments; 
  var path = (argc > 3) ? argv[3] : null;  
  var domain = (argc > 4) ? argv[4] : null;  
  var secure = (argc > 5) ? argv[5] : false;  
  
  
  document.cookie = name + "=" + value + 
  ((path == null) ? "" : ("; path=" + path)) +  
  ((domain == null) ? "" : ("; domain=" + domain)) + 
  ((secure == true) ? "; secure" : "");
}

function Deletecookie (name) {  //删除名称为name的Cookie
 var exp = new Date();  
 exp.setTime (exp.getTime() - 1);  
 var cval = GetCookie (name);  
 document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
function Clearcookie()//清除COOKIE
 {
 var temp=document.cookie.split(";");
 var loop3;
 var ts;
 for (loop3=0;loop3<temp.length;loop3++)
  {
  ts=temp[loop3].split("=")[0];
  if (ts.indexOf('mycat')!=-1)
DeleteCookie(ts);  //如果ts含“mycat”则执行清除
  } 
 }

function getCookieVal (offset) { //取得项名称为offset的cookie值
 var endstr = document.cookie.indexOf (";", offset);  
 if (endstr == -1)
  endstr = document.cookie.length;  
  return unescape(document.cookie.substring(offset, endstr));
}

function GetCookie (name) {  //取得名称为name的cookie值
  var arg = name + "=";  
  var alen = arg.length;  
  var clen = document.cookie.length;  
  var i = 0;  
  while (i < clen) { 
  var j = i + alen; 
  if (document.cookie.substring(i, j) == arg)
 return getCookieVal (j); 
 i = document.cookie.indexOf(" ", i) + 1; 
 if (i == 0) break;
  }  
  return null;

站内搜索