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=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="data: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> > 购物车
</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="data: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 © 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在购物车中的应用的更多相关文章

Ajax实例-购物车
一.概述 1.当添加或删除商品时,购物车会立即更新数据 2.思路: (1)建立商品类Item.java,存有商品属性name,prince,code(商品编码)等 (2)建立商品目录类Catalog. ...
Ajax改动购物车
1.购物车类的设计 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2hpeWVxaWFuZ2xkaA==/font/5a6L5L2T/fontsize/4 ...
session购物车中的移除功能部分（学生笔记）
function onclick_remove(r) { if (confirm("确认删除么!此操作不可恢复")) { var out_momey = $(".out_ ...
(五)Ajax修改购物车单品数量
需要gson-2.2.4.jar BookServlet.java package com.aff.bookstore.servlet; import java.io.IOException; imp ...
jQuery AutoComplete在AJAX UpdatePanel环境中PostBack之后无法工作
前些日子,Insus.NET有实现<ASP.NET MVC使用jQuery实现Autocomplete>http://www.cnblogs.com/insus/p/5638895.htm ...
【spring 后台跳转前台】使用ajax访问的后台，后台正常执行，返回数据，但是不能进入前台的ajax回调函数中
问题: 使用ajax访问的后台,后台正常执行,并且正常返回数据,但是不能进入前台的ajax回调函数中问题展示: 问题解决: 最后发现是因为后台的方法并未加注解:@ResponseBody,导致方法 ...
想抛就抛：Application_Error中统一处理ajax请求执行中抛出的异常
女朋友不是想抛就抛,但异常却可以,不信请往下看. 今天在MVC Controller中写代码时,纠结了一下: public async Task<ActionResult> Save(in ...
使用Ajax在javascript中调用后台C#函数
使用Ajax在javascript中调用后台C#函数最近一段时间在紧跟一个网站的项目,数据库中用户表的UserName要求是唯一的,所以当用户选定一个用户名进行注册时要首先检查该用户名是否已被占用, ...
ajax调用webService中的方法
页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx. ...

随机推荐

AI-Info-Micron-Insight：通往完全自主之路
ylbtech-AI-Info-Micron-Insight:通往完全自主之路 1.返回顶部 1. 通往完全自主之路自动驾驶汽车正在从未来梦想演变为当代现实,随着技术成熟,个人和公共交通将永远转变. ...
python2和python3中的range区别
python2中的range返回的是一个列表 python3中的range返回的是一个迭代值 for i in range(1,10)在python2和python3中都可以使用,但是要生成1-10的 ...
CodeForces 1097G. Vladislav and a Great Legend
题目简述:给定$n \leq 10^5$个节点的树$T = (V, E)$,令$X \subseteq V$表示一个非空节点集合,定义$f(X)$为包含$X$的最小子树的边数.求 $$ \sum_{\ ...
2、Python IDLE入门
转载:http://www.cnblogs.com/dsky/archive/2012/06/04/2535397.html 1.IDLE是Python软件包自带的一个集成开发环境,初学者可以利用它方 ...
UVaLive 4731 Cellular Network (期望DP)
题意:手机在蜂窝网络中的定位是一个基本问题,假设蜂窝网络已经得知手机处于c1,c2,,,cn这些区域中的一个,最简单的方法是同时在这些区域中寻找手机, 但这样做很浪费带宽,由于蜂窝网络中可以得知手机在 ...
java发送udp广播包
2013-06-07 22:44 1272人阅读评论(2) 收藏举报 import java.io.IOException; import java.net.DatagramPacket; imp ...
imgAreaSelect插件
利用jquery的imgAreaSelect插件实现图片裁剪示例将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借助jquery的imgareaselect插件再配合PHP ...
Git查询
Git查询查询分支 git branch # 查询本地分支 git branch -a # 查询所有分支 $ git branch -a * master remotes/origin/HEAD - ...
[openjudge] 1455:An Easy Problem 贪心
描述As we known, data stored in the computers is in binary form. The problem we discuss now is about t ...
[sdut] 1400 马的走法 dfs
Problem Description 在一个4*5的棋盘上,马的初始位置坐标(纵横)位置由键盘输入,求马能返回初始位置的所有不同走法的总数(马走过的位置不能重复,马走“日”字).如果马的初始位置坐 ...

ajax在购物车中的应用

ajax在购物车中的应用的更多相关文章

随机推荐

热门专题