php+ajax购物车的基本原理--移出购物车

陈勇文发表于 PHP技术分类，标签: php购物车的基本原理

18 四月 2010

5,106

上一篇文章，我简单介绍了php+ajax购物车的基本原理--加入购物车。而有时客户可能会临时把一些加入购物车的东西去掉，所以我们不得不加入一个移出购物车的功能。如下图：

加入购物车就是为商品创建一个$_SESSION变量，那移出购物车就是销毁这个变量。
我们会新建一个文件remove_to_cart.php----ajax请求的页面，用来把商品移出购物车。
首先我们对check_out.php用来显示购物车商品信息的代码增加一个移除的按钮。另外给在显示总金额那里增加一个id="totalamount"的标记，因为移出购物车，总金额会发生变化。更改后的代码如下：(只在表格那里修改就行了。)

<table>
<tr><td>商品</td><td>大小</td><td>数量</td><td>价格</td><td>操作</td></tr>
<?php foreach($products as $key=>$product){ ?>
<tr>
<td><?php echo $product['name'];?></td>
<td><?php echo $product['size'];?></td>
<td><?php echo $product['num'];?></td>
<td><?php echo $product['num']*$product['price'];?></td>
<td><input type="button" value="移除" onclick="remove_to_cart(this,'<?php echo $key;?>')"</td>
</tr>
<?php } ?>
<tr><td colspan="5">总金额为：<span id="totalamount"><?php echo $_SESSION['totalamount'];?></span></td></tr>
</table>
<!---上面的代码增加了一个移除的按钮，点击就会触发remove_to_cart()函数，有两个参数，第一个this表示是按钮本身，方便把商品信息去掉，见下面分析，第二个参数key，是商品的标识符，方便销毁$_SESSION[$key]这个变量。-->
 
<!--我们先分析一下js代码remove_to_car()函数应该怎么写。第一个肯定是把参数key传递给remove_to_cart.php页面。第二个就是把移出购物车的商品信息从页面中去掉。第三个就是更改页面的总金额。-->
<script type="text/javascript">
function createXMLHttpRequest(){
if(window.ActiveXObject)
xmlHttp=new ActiveXObject("Microsoft.XMLHttp");
else if(window.XMLHttpRequest)
xmlHttp=new XMLHttpRequest();
 }
function remove_to_cart(myInput,key){
createXMLHttpRequest(); //创建一个XMLHttpReques对象。最终会把所有的js代码放在同一个文件，所以就不必重复写createXMLHttpRequest()这个函数了。
var postStr="key="+key;
xmlHttp.open("post", "remove_to_cart.php");  //设置请求的页面，这里为remove_to_cart.php;
xmlHttp.setRequestHeader("cache-control","no-cache"); 
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
xmlHttp.send(postStr);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 & xmlHttp.status==200){
//myINput表示按钮本身，它的父元素是td,td的父元素是tr，我们把tr设为隐藏，也就删除了商品信息了。
myInput.parentNode.parentNode.style.display="none";
//下面这句更改移除后商品的总金额，xmlHttp.responseText为返回的总金额。
document.getElementById("totalamount").innerHTML=xmlHttp.responseText;
}else  alert("移除失败");
}
}
</script>
<!--上面的js代码把参数key作为参数以poss方式传递给remove_to_cart.php，请求成功后删除该商品信息并更改商品总金额。-->

下面我们看一下remove_to_cart.php代码是怎么写的。

<?php
session_start();
ob_start();
if($_POST['key']){
$key=$_POST['key'];
//第一步先更改商品总金额。
$num=$_SESSION[$key]['num'];
$price=$_SESSION[$key]['price'];
//之前我们已经把总金额保存在$_SESSION['totalamount']里了,所以这里只需减去移除商品的金额就可以了。
$_SESSION['totalamount']-=$num*$price;
//第二步销毁该商品的变量。
unset($_SESSION[$key]);
echo $_SESSION['totalamount']; //返回更改后的总金额。
}
?>

ok，搞定了，如有任何问题，欢迎留言指出。

« 上一篇：php+ajax购物车的基本原理--加入购物车