首頁 > 開發者 > 網站開發

ajax在購物車中的應用

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：move   ade   cti   article   roo   rip   tar   gis   調用   

代碼如下：

購物車頁面：

<!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=utf-8" />
<title>易買網 - 首頁</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/JavaScript" src="scripts/jQuery-1.8.3.min.js"></script>

</head>
<body>
<div id="header" class="wrap">
    <div id="logo"><img src="images/logo.gif" /></div>
    <div class="help"><a href="shopping.html" class="shopping">購物車X件</a><a href="login.html">登入</a><a href="register.html">註冊</a><a href="guestbook.html">留言</a><a href="manage/index.html">後台管理</a></div>
    <div class="navbar">
        <ul class="clearfix">
            <li class="current"><a href="#">首頁</a></li>
            <li><a href="#">圖書</a></li>
            <li><a href="#">百貨</a></li>
            <li><a href="#">品牌</a></li>
            <li><a href="#">促銷</a></li>
        </ul>
    </div>
</div>
<div id="childNav">
    <div class="wrap">
        <ul class="clearfix">
            <li class="first"><a href="#">音樂</a></li>
            <li><a href="#">影視</a></li>
            <li><a href="#">少兒</a></li>
            <li><a href="#">動漫</a></li>
            <li><a href="#">小說</a></li>
            <li><a href="#">外語</a></li>
            <li><a href="#">數位相機</a></li>
            <li><a href="#">筆記本</a></li>
            <li><a href="#">羽絨服</a></li>
            <li><a href="#">秋冬靴</a></li>
            <li><a href="#">運動鞋</a></li>
            <li><a href="#">美容護膚</a></li>
            <li><a href="#">家紡用品</a></li>
            <li><a href="#">嬰幼奶粉</a></li>
            <li><a href="#">飾品</a></li>
            <li class="last"><a href="#">Investor Relations</a></li>
        </ul>
    </div>
</div>
<div id="position" class="wrap">
    您現在的位置：<a href="index.html">易買網</a> &gt; 購物車
</div>
<div class="wrap">
    <div id="shopping">
        <form action="address.html">
            <table>
                <tr>
                    <th>商品名稱</th>
                    <th>商品價格</th>
                    <th>購買數量</th>
                    <th>操作</th>
                </tr>
<?PHP 
$userid = 1;//和addCart.php同理，正常情況下可以從session擷取到
try{
  $pdo = new PDO("MySQL:host=localhost;dbname=lian","root","",array(PDO::ATTR_ERRMODE=>PDO::
  ERRMODE_EXCEPTION));
  $pdo->query("set names utf8");
  $sql = "select p.id,p.title,p.price,c.num from shop_product p right join shop_cart c on p.id=c.productid where c.userid=?";
  $stmt = $pdo->prepare($sql);
  $stmt->execute(array($userid));
  $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
}catch(PDOException $e){
  echo $e->getMessage();
}
?>
<?php
$total = 0;
foreach($data as $product):
?>
                <tr id="product_tr">
                    <td class="thumb"><img src="images/product/0.jpg" /><a href="product-view.html"><?php echo $product[‘title‘]?></a></td>
                    <td class="price" id="price_id_0">
                        <span id="price">￥<span id="product_price"><?php echo $product[‘price‘]?></span></span>
                        <input type="hidden" value="99" />
                    </td>
                    <td class="number">
                        <input id="number_id_0" type="text" name="number" value="<?php echo $product[‘num‘]?>" onblur="changeNum(<?php echo $product[‘id‘]?>,this.value)"/>
                    </td>
                    <td class="delete"><a href="javascript:delPro(<?php echo $product[‘id‘]?>)">刪除</a></td>
                </tr>
<?php 
$total+=$product[‘price‘]*$product[‘num‘];
endforeach;
?>   
            </table>
            <div class="total"><span id="total">總計：￥<span id="product_total"><?php echo $total?></span></span></div>
            <div class="button"><input type="submit" value="" /></div>
        </form>
    </div>
<script type="text/javascript">
  function changeNum(productid,num){
    //通過ajax把參數傳給php後台在購物車表中進行商品數量的修改
    var url = "changeNum.php";
    var data = {"productid":productid,"num":num};
    var success = function(response){
      if(response.errno == 0){
      var total = ($("#number_id_0").val())*($("#product_price").html());
      $("#product_total").html(total);
      }
    }
    $.post(url,data,success,"json");
  }
function delPro(productid){
  //通過ajax把商品id傳給PHP後台把購物車表中的資料刪除
  var total = 0;
  var url = "delPro.php";
  var data = {"productid":productid};
  var success = function(response){
    if(response.errno == 0){
      $("#product_tr").remove();
      $("#product_total").html(total);
    }
  }
  $.get(url,data,success,"json");
}
</script>
    <script type="text/javascript">
        document.write("Cookie中記錄的購物車商品ID："+ getCookie("product") + "，可以在動態網頁面中進行讀取");
    </script>
</div>
<div id="footer">
    Copyright &copy; 2013  All Rights Reserved. 京ICP證1000001號
</div>
</body>
</html>

php刪除頁面：

<?php
//接收,處理參數
$productid = intval($_GET[‘productid‘]);
$userid = 1;
//刪除資料
try{
  $pdo = new PDO("mysql:host=localhost;dbname=lian","root","",array(PDO::ATTR_ERRMODE=>PDO::
  ERRMODE_EXCEPTION));
  $pdo->query("set names utf8");
  $sql = "delete from shop_cart where productid=? and userid=?";
  $stmt = $pdo->prepare($sql);
  $stmt->execute(array($productid,$userid));
  $rows = $stmt->rowCount();
}catch(PDOException $e){
  echo $e->getMessage();
}
if($rows){
  $response = array(
    "errno" => 0,
    "errmsg"=> "success",
    "data"  => true
  );
}else{
  $response = array(
    "errno" => -1,
    "errmsg"=> "fail",
    "data"  => false
  );
}
echo json_encode($response);

php添加頁面：

<?php
//接收參數
$productid = intval($_POST[‘productid‘]);
$num = intval($_POST[‘num‘]);
//準備向購物車表中添加的資料
$userid = 1;//實際項目中，使用者登入後$userid是在session中存著的，這裡沒有寫登入註冊頁面，就直接定義了
try{
  $pdo = new PDO("mysql:host=localhost;dbname=lian","root","",array(PDO::ATTR_ERRMODE=>PDO::
  ERRMODE_EXCEPTION));
  $pdo->query("set names utf8");
  $sql = "select price from shop_product where id=?";
  $stmt = $pdo->prepare($sql);
  $stmt->execute(array($productid));
  $data = $stmt->fetch(PDO::FETCH_ASSOC);
  $price = $data[‘price‘];
  $createtime = time();
  //添加(還要判斷目前使用者在購物車中是否已經加入了該商品，如果已經加入了，只需修改數量即可，如果沒加入，再把一條完整資料加入)
  $sql = "select * from shop_cart where productid=? and userid=?";
  $stmt = $pdo->prepare($sql);
  $stmt->execute(array($productid,$userid));
  $data = $stmt->fetch(PDO::FETCH_ASSOC);
  if($data){
  $sql = "update shop_cart set num=num+? where productid=? and userid=?";
    $params = array($num,$productid,$userid);
  }else{
  $sql = "insert into shop_cart(productid,num,userid,price,createtime)values(?,?,?,?,?)";
    $params = array($productid,$num,$userid,$price,$createtime);
  }
  $stmt = $pdo->prepare($sql);
   $stmt->execute($params);
  $rows =$stmt->rowCount();
}catch(PDOException $e){
  echo $e->getMessage();
}
//返回最終添加的結果
if($rows){
  $response = array(
    ‘errno‘ => 0,
    ‘errmsg‘=> ‘success‘,
    ‘data‘  => true
  );
}else{
   $response = array(
    ‘errno‘ => -1,
    ‘errmsg‘=> ‘fail‘,
    ‘data‘  => false
  );
}
echo json_encode($response);

php修改商品數量頁面：

<?php
//接收ajax傳過來的參數,準備參數
$productid = intval($_POST[‘productid‘]);
$num = intval($_POST[‘num‘]);
$userid = 1;//正常情況下可以從session中擷取到
//更新購物車表的資料
try{
  $pdo = new PDO("mysql:host=localhost;dbname=lian","root","",array(PDO::ATTR_ERRMODE=>PDO::
  ERRMODE_EXCEPTION));
  $pdo->query("set names utf8");
  $sql = "update shop_cart set num=? where productid=? and userid=?";
  $stmt = $pdo->prepare($sql);
  $stmt->execute(array($num,$productid,$userid));
  $rows = $stmt->rowCount();
}catch(PDOException $e){
  echo $e->getMessage();
}
if($rows){
  $response = array(
    "errno" => 0,
    "errmsg"=> "success",
    "data"  => true
  );
}else{
  $response = array(
    "errno" => -1,
    "errmsg"=> "fail",
    "data"  => false
  );
}
echo json_encode($response);

總結如下：

1,ajax起到一種前後台傳遞資料的中轉站作用，頁面在不需要重新整理的情況下前後台資料互動

2，前台標籤元素等調用JavaScript函數，函數中運用ajax向後台傳遞參數，在jQuery下有三種方式$get(),$post(),
$ajax(),$get()和$post()參數含義相同，一參指url,二參指要傳遞的資料，三參指請求成功後回調的函數，四參指定資料
格式，如json、xml等。$ajax()中要放入一個json對象，也就是用{}擴著，{}內一參指url，二參指要傳遞的參數，三參
指請求成功後回調的函數，四參指定資料格式，五參指要用何種傳輸方法，預設是get，可以改成post。回呼函數的作用
一般是用來驗證是否成功，如果請求成功可以繼續操作一些節點改變頁面效果。
3，pdo操作資料庫
try{
  $pdo = new PDO("mysql:host=localhost;dbname=lian","root","",array(PDO::ATTR_ERRMODE=>PDO::
  ERRMODE_EXCEPTION));
  $pdo->query("set names utf8");
  $sql = "delete from shop_cart where productid=? and userid=?";
  $stmt = $pdo->prepare($sql);
  $stmt->execute(array($productid,$userid));
  $rows = $stmt->rowCount();
}catch(PDOException $e){
  echo $e->getMessage();
}
其中PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION是在設定異常處理模式
三個值得區別如下：
PDO::ERRMODE_SILENT
這是預設使用的模式。PDO會在statement和database對象上設定簡單的錯誤代號，可以使用PDO->errorCode() 和 PDO->errorInfo() 方法檢查錯誤；
PDO::ERRMODE_WARNING
使用這個模式時，PDO將會發出一個傳統的E_WARNING資訊。
PDO::ERRMODE_EXCEPTION
PDO會拋出一個PDOException異常並設定它的屬性來反映錯誤代號和錯誤資訊。

4，php後台完成查詢修改刪除增加後要把ajax請求的結果成功與否傳回前台
if($rows){
  $response = array(
    "errno" => 0,
    "errmsg"=> "success",
    "data"  => true
  );
}else{
  $response = array(
    "errno" => -1,
    "errmsg"=> "fail",
    "data"  => false
  );
}
echo json_encode($response);  

ajax在購物車中的應用

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
自學成才的秘密：115個 web Develop 資源_經典網摘
H5 中html 頁面存為圖片並長按 儲存
__x__(20)0907第四天__ css 框模型
SVN提示https認證驗證失敗問題svn: E230001: Server SSL certificate verifi...
JS如何判斷文字是全形還是半形（轉載）
Citrix NetScaler產品學習筆記之一：Citrix NetScaler概述

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More