首页手记 AJAX请求数据完成添加购物车操作

AJAX请求数据完成添加购物车操作

标签：

PHP MySQL JavaScript

(1)编写SQL：数据库名：jd，包含如下的数据表：

      jd_user( uid,  uname,    upwd )
      jd_product( pid,  pname,  price,  pic  )
      jd_cart( cid,  userId )
      jd_cart_detail( did,  cartId,  productId,  count )

（jd_product和jd_cart属于sql中的多对多点数据查询，还需要一个jd_cart_detail的表作为中间表来查询数据）。

(2)编写PHP：data/header.php，包含全站中每个页面必需页头部分；

(3)编写PHP：data/footer.php，包含全站中每个页面必需页尾部分；

(4)编写HTML: productlist.html/js，待页面加载完后，异步请求页头和页尾——修改其中所有的样式/图片错误

     $(function(){
        $('#site_header').load('data/header.php');
        $('#site_footer').load('data/footer.php');
      })

(5)编写PHP：data/user_login.php，接收客户端提交的uname和upwd，验证登录信息，返回{"code":1,"msg":"login succ","uname":"qiangdong", "uid":10 }，或{"code":-2, "msg":"用户名为空"}，或{"code": -1, "msg":"用户名或密码有错误"}

header('Content-Type: application/json');

@$n = $_REQUEST['uname'] or die('{"code":-2, "msg":"用户名不能为空"}');
@$p = $_REQUEST['upwd'] or die('{"code":-3, "msg":"密码不能为空"}');
require('1_init.php');

$sql = "SELECT uid FROM jd_user WHERE uname='$n' AND upwd='$p'";
$result = mysqli_query($conn,$sql);

//此处省略了$result为false(SQL语法错误)的检验

$row = mysqli_fetch_row($result);
if($row===null){    //查询结果集中没有记录
echo '{"code":-1,"msg":"用户名或密码错误"}';
}else {  //查询结果集中有记录
$uid = $row[0];
$output = [ （经验：php中数组的格式，可以都过json_encode输出为json格式返回给客户端）
    'code'=>1,
    'msg'=>'登录成功',
    'uname'=>$n,
    'uid'=>$uid
];
echo json_encode($output);
}

(6)修改HTML:productlist.html，显示出模态登录框，实现异步用户登录；登录成功，则隐藏模态框，顶部显示出“欢迎回来：xxxx”。

        $(function(){
          $('#site_header').load('data/header.php',function(){
            //异步请求完成(即页头加载完成)后的回调
            $('#welcome').html('欢迎回来：'+cookieObject.loginUname);
          });
          $('#site_footer').load('data/footer.php');
        })

(7)编写PHP：product_list.php，向客户端输出所有的产品信息，以JSON格式
*分页向客户端输出所有的产品信息，以JSON格式，形如：

  {
recordCount: 36,    //满足条件的总的记录数
pageSize: 8,        //页面大小，一页中最多保存的记录数
pageCount: 5,       //页面数量
pageNum: 3,     //当前显示的页号
data: [{},{},...{}]     //当前页中的记录数据
}
*/
header('Content-Type: application/json');
//接收客户端提交的要显示的页号
@$pno = $_REQUEST['pageNum'];
if($pno===null){    //客户端未提交要显示的页号
$pno = 1;
}else {             //客户端提交了页号，默认是字符串
$pno = intval($pno);    //字符串解析为整数
}

require('1_init.php');

//要输出给客户端数据
$output = [
'recordCount'=>0,   //总记录数
'pageSize'=>8,      //页面大小
'pageCount'=>0,     //总页数
'pageNum'=>$pno,    //当前显示的页号
'data'=>null        //当前页中的数据
];

//查询出总的记录数
$sql = "SELECT COUNT(*) FROM jd_product";
$result = mysqli_query($conn,$sql);
$row = mysqli_fetch_row($result);
$output['recordCount'] = intval($row[0]);

//计算总的页数
$output['pageCount'] = ceil( $output['recordCount'] / $output['pageSize'] );  //ceil(36/8)

//查询出当前页中的记录行
$start = ($output['pageNum']-1)*$output['pageSize']; //从哪一行开始读取数据
$count = $output['pageSize']; //一次最多读取的行数
$sql = "SELECT * FROM jd_product LIMIT $start,$count";
$result = mysqli_query($conn, $sql);
$output['data'] = mysqli_fetch_all($result, MYSQLI_ASSOC);
echo json_encode($output);

(8)修改HTML:productlist.html，待页面加载完成，异步请求所有的产品列表，显示在页面中

(9)编写PHP：cart_detail_add.php，接收客户端提交的用户编号（uid）、产品编号（pid），试着向购物车中添加新的购买记录
SQL1：根据用户编号查询出他对应的购物车编号
SQL2：如果用户没有购物车，则添加一个购物车，获得购物车编号
SQL3：查询购物车详情，对应的购物车编号+产品编号是否存在
SQL4：若之前未购买过该商品，则插入一条购买记录购买数量为1
SQL5：若之前已经购买该商品，则更新购买数量+1
最后向客户端返回：{"code":1, "msg":"购买成功","count": 3}

    <?php
/*
*接收客户端提交的用户编号（uid）、产品编号（pid），试着向购物车中添加新的购买记录
*最后向客户端返回：{"code":1, "msg":"购买成功","count": 3}
*/
header('Content-Type: application/json;charset=UTF-8');

//接收客户端提交数据
@$userId = $_REQUEST['uid'] or die('{"code":-2,"msg":"用户编号不能为空"}');
@$productId = $_REQUEST['pid'] or die('{"code":-3,"msg":"产品编号不能为空"}');

require('1_init.php');

//SQL1：根据用户编号查询出他对应的购物车编号
$sql = "SELECT cid FROM jd_cart WHERE userId='$userId'";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_row($result);

if($row===null){    //没有查询到购物车编号
//SQL2：如果用户没有购物车，则添加一个购物车，获得购物车编号
$sql = "INSERT INTO jd_cart VALUES(NULL,'$userId')";
mysqli_query($conn, $sql);
$cartId = mysqli_insert_id($conn); //读取刚创建的购物车编号
    }else {     //查询到了购物车编号
$cartId = $row[0];
}

//SQL3：查询购物车详情，对应的购物车编号+产品编号是否存在
    $sql = "SELECT did,count FROM jd_cart_detail WHERE cartId='$cartId' AND                 productId='$productId'";
$result = mysqli_query($conn,$sql);
$row = mysqli_fetch_row($result);

if($row===null){  //指定购物车中没有该商品的购买记录
//SQL4：若之前未购买过该商品，则插入一条购买记录，购买数量为1
$sql = "INSERT INTO jd_cart_detail VALUES(NULL,'$cartId','$productId','1')";
mysqli_query($conn,$sql);
$count = 1;
}else {   //指定购物车中买过该商品 
//SQL5：若之前已经购买该商品，则更新购买数量+1
$did = $row[0];     //详情编号
$count = $row[1];   //购买数量
$count++;
$sql = "UPDATE jd_cart_detail SET count='$count' WHERE did='$did'";
mysqli_query($conn,$sql);
}

    echo '{"code":1, "msg":"购买成功", "count":'.$count.'}';

(10)修改HTML:productlist.html，为每个商品下面“添加到购物车”绑定事件监听，点击后异步提交，将购买记录添加到购物车。

    $('#plist').on('click','a.addcart', function(e){
      e.preventDefault();
      var pid = $(this).attr('href');
          //把当前登录用户编号+商品编号提交给服务器，执行购物车条目添加
  $.ajax({
        type: 'POST',  
        url: 'data/5_cart_detail_add.php',
        data: {'uid': loginUid, 'pid': pid},
        success: function(data){
        if(data.code<0){
        alert('添加失败！错误原因：'+data.msg);
          }else {
        alert('添加成功！该商品已购买：'+data.count);
      }
    },
    error: function(){
      alert('添加购物车商品出错！请检查响应消息！');
    }
  });
});

(11) 修改HTML:productlist.html，为“查看我的购物车”按钮添加事件监听，点击后在Cookie中保存登录用户名和编号，跳转到“购物车页面”
(12)编写HTML：shoppingcart.html，页面加载完成后，读取Cookie数据，获取用户名和编号，若不存在，则跳转回登录页面
(13)修改HTML：shoppingcart.html，异步请求页头和页尾，页头加载完后，修改提示消息“欢迎回来：xxx”
(14)编写PHP：cart_detail_list.php，接收客户端提交的用户编号，查询出该用户购物车中的所有商品信息，以JSON格式返回

SELECT pid,pname,price,pic, count
FROM jd_product,  jd_cart_detail
WHERE 
cartId=( SELECT cid FROM jd_cart WHERE userId=10 ) 
AND 
pid=productId ;

(15)修改HTML：shoppingcart.html，页面加载完后，异步请求当前登录用户的购物车内容

<?php
/*
*接收客户端提交的用户编号，查询出该用户购物车中的所有商品信息，以    JSON格式返回
*/
header('Content-Type: application/json');

@$uid = $_REQUEST['uid'] or die('{"code":-2,"msg":"用户编号不能为空"}');

require('1_init.php');

$sql = "SELECT pid,pname,price,pic,did,count FROM     jd_product,jd_cart_detail WHERE cartId=( SELECT cid FROM jd_cart WHERE userId=$uid ) AND pid=productId";
$result = mysqli_query($conn, $sql);

$list = mysqli_fetch_all($result, MYSQLI_ASSOC);

echo json_encode($list);

(16)编写PHP：cart_detail_delete.php，接收客户端提交的详情编号did，从购物车详情中删除该记录，返回{"code":1,"msg":"删除成功"}
(17)修改HTML：shoppingcart.html，为“删除”按钮绑定监听函数，点击后异步请求提交要删除的did，服务器删除成功后，客户端从TABLE中删除当前TR!

    $('#cart tbody').on('click', 'a:contains("删除")', function(e){
  e.preventDefault();
  var did = $(this).attr('href');
  var that = this;  //使用临时变量指向当前被点击的A
  $.ajax({
type: 'POST',
url: 'data/7_cart_detail_delete.php',
data: {'did': did},
success: function(data){
  if(data.code<0){
    alert('响应成功但删除失败！原因：'+data.msg);
  }else {
    alert('购买记录删除成功！');
    //必须手工从table中删除当前tr！
    //console.log(this); //$.ajax中的this指向请求对象
        $(that).parent().parent().remove();

  }
},
error: function(){
  alert('购买记录删除失败！请检查响应消息！');
}
  })
})

(17)修改HTML：shoppingcart.html，为“删除”按钮绑定监听函数，点击后异步请求提交要删除的did，服务器删除成功后，客户端从TABLE中删除当前TR!
(18)编写PHP：cart_detail_update.php，接收客户端提交的详情编号did和修改后的购买数量count，更新该购物车详情记录，返回{"code":1,"msg":"更新成功"}
(19)修改HTML：shoppingcart.html，为“+”和“-”按钮绑定监听函数，点击后异步请求提交要did和count，服务器修改成功后，客户端修改购买数量!

点击查看更多内容