为了账号安全,请及时绑定邮箱和手机立即绑定

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

(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,服务器修改成功后,客户端修改购买数量!

点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
19
获赞与收藏
258

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消