php+mysql+Apache購物車功能實現之商品添加

購物車基本功能:商品的添加、修改、刪除、結算、和分頁查詢

文件的基本組織形式:phone_index.php(商品的展示,這裏有商品添加按鈕)

                                     phone_index.js(實現商品添加的js,利用Ajax請求數據)

                                     shopcar_accept.php(接受商品添加的ajax請求,訪問數據庫並且添加數據,最後返回狀態碼)


添加細節展示              

phone_index.php   

<body>
<?php include("index_top_nav.php")?>
<div class = "wrap">
<nav class="navbar navbar-default">
<p class="navbar-text p1">商品</p>
<p class="navbar-text p2">價格</p>
<p class="navbar-text p3">庫存</p>
<p class="navbar-text p4">操作</p>
</nav>
<?php
$connID = mysqli_connect("127.0.0.1","root","","shop");
mysqli_query($connID,"set names utf8");
$query = "select id,name,price,number from phone";
$result = mysqli_query($connID,$query);
while($arr = mysqli_fetch_array($result,MYSQLI_NUM)){	
?>
<div class="panel panel-default">
<div class = " img"><img src="image/20191001.jpg" alt="..."/></div>
<div class = "panel-body id"><?php echo $arr[0];?></div>	
<div class = "panel-body name"><?php echo $arr[1];?></div>	  
<div class = "panel-body price"><?php echo $arr[2];?></div>
<div class = "panel-body number"><?php echo $arr[3];?></div>
<div class = "panel-body caozuo">
<button type="button" class="btn btn-default">加入購物車</button>
<button type="button" class="btn btn-default">詳細信息</button>
</div>		
   </div>
<?php
}	
?>
</div>
</body>

    圖片             上面訪問的數據是已經定義好的,數據是已經存在的.

添加功能(phone_index.js 請求 shopcar_accept.php) 實現

var allAddCarBtn = document.getElementsByTagName("button");
function BtnAddEvent(){
    for(var i=0;i<allAddCarBtn.length;i++){
        allAddCarBtn[i].addEventListener("click",function(){
            var comId = this.parentNode.parentNode.firstElementChild.nextElementSibling.innerHTML;
            console.log(comId);
            getData(comId);
        })
    }
}
BtnAddEvent();
//Ajax傳送數據
function getData(dataById){
    var xmlHttp = new XMLHttpRequest();
    var url = "shopcar_accept.php?id="+dataById;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.status == 200 && xmlHttp.readyState == 4){
            console.log(xmlHttp.responseURL);
           if(xmlHttp.responseText == "1"){
               alert("請登錄...");
                location.href = "login.php";
           }
           if(xmlHttp.responseText == "2"){
            alert("該商品已經存在...");
        }
        if(xmlHttp.responseText == "0"){
            alert("插入成功...");   
        }
        }
    }
}

給所有的添加按鈕綁定事件,並且根據隱藏的存儲商品id的DOM來指定需要添加的數據.最後根據狀態來先顯示信息.

<?php
//創建session
session_start();
header('content-type:text/html;charset=GB2312');
if(!isset($_SESSION["name"])){
    echo "1";//用戶尚未登錄
    exit;
}else{
    include("conn/conn.php");
    //判斷用戶的購物車數據表是否存在
    $userTableName = $_SESSION["name"]."_car";
    //判斷該用戶的表是否存在 如果不存在則創建它
    $select = "CREATE TABLE `".$userTableName."` (
        `name` varchar(50) NOT NULL,
        `price` int(5) NOT NULL,
        `number` int(3) NOT NULL,
        `total` int(6) NOT NULL
       ) ENGINE=MyISAM DEFAULT CHARSET=gbk";
    $result = mysqli_query($connID,"SHOW TABLES LIKE '". $userTableName."'");
    $num = mysqli_num_rows($result);
    if($num == 0){
        mysqli_query($connID,$select);
    }
    //連接該商品的數據庫
    //找到該數據 找到是肯定的
    $select = "SELECT name,price FROM allshop WHERE id = '".$_GET['id']."'";
    $result = mysqli_query($connID,$select);
    //$arr爲需要添加的商品
    $arr = mysqli_fetch_array($result);
    //現在購物車shopcarbyeveryone中查詢該商品是否存在
    //如果存在 則提示用戶商品已經存在  如果不存在 則添加該商品 並顯示提示信息
    $select = "SELECT name FROM ".$userTableName." WHERE name = '".$arr[0]."'";
    $result = mysqli_query($connID,$select);
    $num = mysqli_num_rows($result);
    if($num>0){
        echo "2"; //商品已經存在
    }else{
      //不存在該商品 插入
      $select = "INSERT INTO `".$userTableName."`(`name`, `price`, `number`, `total`) VALUES ('".$arr[0]."',".$arr[1].","."1,".$arr[1].")";
      $result = mysqli_query($connID,$select);
      if($result){
          echo "0";
      }
    }
}
?>

基本思路:首先判斷用戶是否登錄,若沒有登錄則跳轉到登錄頁面,若登錄判斷屬於該用戶的購物車數據表是否存在,若不存在則創建,若存在則根據ajax傳送來的數據判斷該商品是否已經存在,若不存在實現添加功能。最後返回轉態碼到用responseText返回到js顯示提示信息.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章