【京东账户】——Mysql/PHP/Ajax爬坑之购物车列表显示

一、引言

做京东账户项目中的购物车模块，功能之二是购物车列表显示。要用到的是Apach环境，Mysql、PHP以及Ajax。

二、小功能-点击“去购物车结算”

小坑：Ajax动态生成的不能直接绑定，因为绑定时这个对象还不存在，要先找一个已存在的元素委托代理。

/***去购物车结算**/
  $(document.body).on("click","#my_js",function(){
  location.href = 'shoppingcart.html';
});

加载shoppingcart页头页尾

$("#header").load("data/header.php");
$("#footer").load("data/footer.php");

 三、购物车列表显示

原理：页面加载后，异步请求当前登录用户购物车中商品信息

数据库表：已有的购物车表   产品表

创建php

①jd.sql   ②init.php  ③cart_list.php｛购物车列表｝

查询数据库

• 多表查询

1. 购物车表       jd_cart｛id/uid/productid/count｝
2. 产品表           jd_product｛pid/pname/price/pic｝

• 查询：mysql标准语法
• 查结果｛购物车id/产品名称/产品图片/产品价格｝

｛购物车中该产品购买数量｝

1. 几张表，表名                 jd_cart/jd_product
2. 每一张表起一个别名       c/p
3. 条件 = > < !=                  c.productid = p.pid

<?php
  header("Content-Type:application/json;charset=utf-8");
  @$uid = $_REQUEST['uid']or die("-1");//获取用户id
  require('init.php');
  $sql = "SELECT c.id,p.pname,p.pic,p.price,c.count
       FROM  jd_cart c,jd_product p
       WHERE c.productid=p.pid
       AND   c.uid = $uid";
  $result = mysqli_query($conn,$sql);
  $rows = mysqli_fetch_all($result,MYSQLI_ASSOC);
  $str = json_encode($rows);
  echo $str;
?>

<?php
  $conn = mysqli_connect("127.0.0.1","root","","jd",3306);
  mysqli_query($conn,"SET NAMES UTF8");
?>

测试 ：http://127.0.0.1/jd_store/data/cart_list.php?uid=10     输出所有字符串

创建js｛分析html/css｝

      ①shoppingcart.html

②js/shoppingcartt.js

③js

$.ajax({
        url:"data/cart_list.php",
        data:{uid:10},
        success:function(data){
            var html = "";
            for(var i=0;i<data.length;i++){
                var obj = data[i];
            html +=`
               <tr>
                    <td>
                        <input type="checkbox"/>
                        <input type="hidden" value="${obj.pid}" />
                        <div><img src="${obj.pic}" alt=""/></div>
                    </td>
                    <td><a href="">${obj.pname}</a></td>
                    <td>${obj.price}</td>
                    <td>
                        <button>-</button><input type="text" value="${obj.count}"/><button>+</button>
                    </td>
                    <td><span>￥${obj.price*obj.count}</span></td>
                    <td><a href="${obj.id}">删除</a></td>
                </tr>
            `;
            }
            $("#cart tbody").html(html);
        },
        error:function(){
        }
    });

实现效果：

---

注：转载请注明出处