zoukankan      html  css  js  c++  java

  • php AJAX 购物车 点击添加到购物车ajax返回添加到购物车同时返回购物车当前产品数量

    这个例子是asp的例子http://www.corange.cn/archives/2009/06/3268.html的php版本
    AJAX 购物车 http://www.cnblogs.com/zerogo/admin/www.corange.cn修改功能并通过测试
    主要功能cookie购物车 添加了cookie保存时间 点击后显示添加到购物车ajax返回添加到购物车同时返回购物车当前产品数量
    本例按下「放入购物车」按钮后，会在服务器端执行记录动作，完成后响应消息给到画面上，则，原本「放入购物车」按钮就变成「已加入购物车图」。
    http://www.corange.cn//uploadfiles/0624_17012.jpg

    <!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
    首发于我的主站
    http://corange.cn/archives/2009/06/3269.html
  • 相关阅读:
    Java自学-JDBC execute与executeUpdate的区别
    POI 操作Word, 向Word中写入文本,图片.
    C++ 设计模式 4：行为型模式
    C++ 设计模式 3：结构型模式
    C++ 设计模式 2：创建型模式
    C++ 设计模式 1：概述
    C++ 数据结构 4：排序
    C++ 数据结构 3：树和二叉树
    C++ 数据结构 2：栈和队列
    C++ 数据结构 1：线性表
  • 原文地址：https://www.cnblogs.com/zerogo/p/1514226.html
Copyright © 2011-2022 走看看