AJAX 购物车 http://www.cnblogs.com/zerogo/admin/www.corange.cn修改功能并通过测试
主要功能cookie购物车 添加了cookie保存时间 点击后显示添加到购物车ajax返回添加到购物车同时返回购物车当前产品数量
本例按下「放入购物车」按钮后，会在服务器端执行记录动作，完成后响应消息给到画面上，则，原本「放入购物车」按钮就变成「已加入购物车图」。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="AJAX Asynchronous JavaScript + XML Asynchronous Javascript And XML DOM Document Object Mode CSS CSS2 CSS3" />
<meta name="description" content="AJAX Asynchronous JavaScript + XML Asynchronous Javascript And XML DOM Document Object Mode CSS CSS2 CSS3" />
<meta name="Author" content="Audi" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<link href="font.css" rel="stylesheet" type="text/css" />
<title>AJAX 购物车</title>
<style type="text/css">
input.submit
{
font-size:80%;
padding:5px 2em 0px 2em;
background:url(../images/btnBG.jpg);
border:3px double;
border-color: #c4cccc #acb5b5 #6f7777 #acb5b5;
}
input.submit:hover
{
color:#900;
background:url(/images/btnBG2.jpg);
border:3px double;
border-color: #6d5 #5b5 #459455 #5b5;
}
</style>
<script type="text/javascript">
<!--
var xmlHttp;
function createXHR(){
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (!xmlHttp) {
alert('您使用的瀏覽器不支援 XMLHTTP 物件');
return false;
}
}
function sendRequest(url){
createXHR();
xmlHttp.open('GET',url,true);
xmlHttp.onreadystatechange=catchResult;
xmlHttp.send(null);
}
function catchResult(){
if (xmlHttp.readyState==4){
s=xmlHttp.responseText;
if (xmlHttp.status == 200) {
document.getElementById(s).innerHTML='<img src="058/btn_cart.gif" width="129" height="32" align="absmiddle" />';
var cart_count = document.getElementById('cart_count');
getCartNumber();
}else{
alert('執行錯誤,代碼:'+xmlHttp.status+'\('+xmlHttp.statusText+'\)');
}
}
}
function init(){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (!xmlhttp) {
alert('您使用的瀏覽器不支援 XMLHTTP 物件');
return false;
}
var url='058-getCookies.php?ts='+new Date().getTime();
xmlhttp.open('GET',url,true);
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 ){
if (xmlhttp.status == 200) {
var bID=xmlhttp.responseText.split(',');
for (var i=0;i<bID.length;i++){
document.getElementById(bID[i]).innerHTML='<img src="058/btn_cart.gif" width="129" height="32" align="absmiddle" />';
var cart_count = document.getElementById('cart_count');
getCartNumber();
}
}else{
alert('執行錯誤,代碼:'+xmlHttp.status+'\('+xmlHttp.statusText+'\)');
}
}
};
xmlhttp.send(null);
//var bID='<%=Request.Cookies("shoppingCart")%>'.split(',');
//
//for (var i=0;i<bID.length;i++){
// document.getElementById(bID[i]).innerHTML='<img src="058/btn_cart.gif" width="129" height="32" align="absmiddle" />';
//}
}
//-->
</script>
</head>
<body onload="init();">
<form method="post" name="prod" id="prod">
<h3>AJAX 购物车</h3>
<p>本例按下「放入购物车」按钮后，会在服务器端执行记录动作，完成后响应消息给到画面上，则，原本「放入购物车」按钮就变成「已加入购物车图」。</p>
<p><a href="058-Cart.php"><img src="058/cart.gif" width="40" height="50" border="0" /></a>(<span id="cart_count">0</span>)<br />
</p>
<table width="100%" border="0" cellspacing="1" cellpadding="2">
<tr>
<td><img src="058/XW6245.jpg" width="111" height="150" /></td>
<td valign="top">
<table cellspacing="0" cellpadding="0">
<tr>
<td>书号：</td>
<td>XW6245</td>
</tr>
<tr>
<td width="60">书名：</td>
<td width="332">解决制作标准网页一定会遇到的186个问题</td>
</tr>
<tr>
<td>类别：</td>
<td>网页设计</td>
</tr>
<tr>
<td>定价：</td>
<td>490</td>
</tr>
<tr>
<td nowrap="nowrap">在线价：</td>
<td>417</td>
</tr>
</table>
<span id="XW6245"><input name="Submit" type="button" class="submit" value="放入购物车"
onclick="sendRequest('058-putInCart.php?x=XW6245&ts='+new Date().getTime());" />
</span>
</td>
<td><img src="058/XW6105.jpg" width="111" height="150" /></td>
<td valign="top">
<table cellspacing="0" cellpadding="0">
<tr>
<td>书?号：</td>
<td>XW6105</td>
</tr>
<tr>
<td width="60">书名：</td>
<td width="332">解决CSS一定会遇到的111个问题</td>
</tr>
<tr>
<td>类别：</td>
<td>网页设计</td>
</tr>
<tr>
<td>定价：</td>
<td>450</td>
</tr>
<tr>
<td nowrap="nowrap">在线价：</td>
<td>383</td>
</tr>
</table>
<span id="XW6105"><input name="Submit2" type="button" class="submit" value="放入购物车"
onclick="sendRequest('058-putInCart.php?x=XW6105&ts='+new Date().getTime());" />
</span>
</td>
</tr>
<tr>
<td><img src="058/XW6215.jpg" width="112" height="150" /></td>
<td valign="top">
<table cellspacing="0" cellpadding="0">
<tr>
<td>书号：</td>
<td>XW6215</td>
</tr>
<tr>
<td width="60">书名：</td>
<td width="332">Flash 8 ActionScrip 2.0 与 RIA 应用程序设计</td>
</tr>
<tr>
<td>类别：</td>
<td>网页设计</td>
</tr>
<tr>
<td>定价：</td>
<td>520</td>
</tr>
<tr>
<td nowrap="nowrap">在线价：</td>
<td>442</td>
</tr>
<tr valign="top">
<td colspan="2" height="20">
<div align="right"></div>
</td>
</tr>
</table>
<span id="XW6215"><input name="Submit4" type="button" class="submit" value="放入购物车"
onclick="sendRequest('058-putInCart.php?x=XW6215&ts='+new Date().getTime());" />
</span>
</td>
<td><img src="058/XW6205.jpg" width="113" height="150" /></td>
<td valign="top">
<table cellspacing="0" cellpadding="0">
<tr>
<td>书号：</td>
<td>XW6205</td>
</tr>
<tr>
<td width="60">书名：</td>
<td width="332">Go轻松Go简单－Flahs 8 动画设计即学即会</td>
</tr>
<tr>
<td>类别：</td>
<td>网页设计</td>
</tr>
<tr>
<td>定价：</td>
<td>320</td>
</tr>
<tr>
<td nowrap="nowrap">在线价：</td>
<td>272</td>
</tr>
</table>
<span id="XW6205"><input name="Submit3" type="button" class="submit" value="放入购物车"
onclick="sendRequest('058-putInCart.php?x=XW6205&ts='+new Date().getTime());" />
</span>
</td>
</tr>
<tr>
<td><img src="058/XW6185.jpg" width="113" height="150" /></td>
<td valign="top">
<table cellspacing="0" cellpadding="0">
<tr>
<td>书号：</td>
<td>XW6185</td>
</tr>
<tr>
<td width="60">书名：</td>
<td width="332">JavaScript 实用范例辞典</td>
</tr>
<tr>
<td>类别：</td>
<td>网页设计</td>
</tr>
<tr>
<td>定价：</td>
<td>450</td>
</tr>
<tr>
<td nowrap="nowrap">在线价：</td>
<td>383</td>
</tr>
</table>
<span id="XW6185"><input name="Submit5" type="button" class="submit" value="放入购物车"
onclick="sendRequest('058-putInCart.php?x=XW6185&ts='+new Date().getTime());" />
</span>
</td>
<td><img src="058/XW6235.jpg" width="113" height="150" /></td>
<td valign="top">
<table cellspacing="0" cellpadding="0">
<tr>
<td>书号：</td>
<td>XW6235</td>
</tr>
<tr>
<td width="60">书名：</td>
<td width="332">我的影音部落</td>
</tr>
<tr>
<td>类别：</td>
<td>网页设计</td>
</tr>
<tr>
<td>定价：</td>
<td>320</td>
</tr>
<tr>
<td nowrap="nowrap">在线价：</td>
<td>272</td>
</tr>
</table>
<span id="XW6235"><input name="Submit6" type="button" class="submit" value="放入购物车"
onclick="sendRequest('058-putInCart.php?x=XW6235&ts='+new Date().getTime());" />
</span>
</td>
</tr>
</table>
</form>
</body>
</html>
<script src="058/js2.js"></script>
代码
http://www.corange.cn//uploadfiles/0622_14419.rar
首发于我的主站
