技术开发 频道

AJAX/PHP/JQuery/CSS设计拖拉式购物车

  步骤4、PHP部分设计

  下面进行PHP部分的代码设计,首先是列出数据库表中的商品,代码简单,如下所示:

Demo.php中
$result = mysql_query("SELECT * FROM internet_shop");    
while($row=mysql_fetch_assoc($result))
{
    
echo '<div class="product"><img src="img/products/'.$row['img'].'" alt="'.htmlspecialchars($row['name']).'" width="128" height="128" class="pngfix" /></div>';
}

   另外一个需要编写PHP代码的地方,是当用户鼠标移动到某个商品介绍时,通过jQuery的simpletips插件,将商品的图片作为参数,使用ajax方式调用,获得该商品的介绍,并且返回为一个HTML文件再给前端页面进行处理,该文件在ajax目录下的tips.php文件,如下所示:

Ajax/tips.php

define('INCLUDE_CHECK',1);
require "../connect.php";

if(!$_POST['img']) die("There is no such product!");

$img=mysql_real_escape_string(end(explode('/',$_POST['img'])));

$row=mysql_fetch_assoc(mysql_query("SELECT * FROM internet_shop WHERE img='".$img."'"));

if(!$row) die("There is no such product!");

echo '<strong>'.$row['name'].'</strong>
<p class="descr">
'.$row['description'].'</p>
<strong>price: $
'.$row['price'].'</strong>
<small>Drag it to your shopping cart to purchase it</small>
';

   此外,我们还需要编写一个addtocart.php文件,这个文件的作用是:当用户将选定的商品拖拉到购物车时,程序在数据库中检索该商品,然后以JSON的形式返回给前端,代码如下:

<?
define('INCLUDE_CHECK',1);
require "../connect.php";

if(!$_POST['img']) die("There is no such product!");

$img=mysql_real_escape_string(end(explode('/',$_POST['img'])));
$row=mysql_fetch_assoc(mysql_query("SELECT * FROM internet_shop WHERE img='".$img."'"));

echo '{status:1,id:'.$row['id'].',price:'.$row['price'].',txt:\'\
\
<table width="100%" id="table_
'.$row['id'].'">\
<tr>\
<td width="60%">
'.$row['name'].'</td>\
<td width="10%">$
'.$row['price'].'</td>\
<td width="15%"><select name="
'.$row['id'].'_cnt" id="'.$row['id'].'_cnt" onchange="change('.$row['id'].');">\
<option value="1">1</option>\
<option value="2">2</option>\
<option value="3">3</option></select>\
\
</td>\
<td width="15%"><a href="#" onclick="remove(
'.$row['id'].');return false;" class="remove">remove</a></td>\
</tr>\
</table>\'}
';

   当用户把商品拖拉到购物车区域后,前端页面就以表格的形式逐一显示出用户所选的商品,如下图:

AJAX/PHP/JQuery/CSS设计拖拉式购物车

  最后,我们看下当用户点结帐按钮后的页面order.php的编写,这里我们只是简单把用户的选择最后罗列出来并且进行商品价格合计,代码如下:

<?php

define('INCLUDE_CHECK',1);
require "connect.php";

if(!$_POST)    // 检查是否有数据提交

{
    
if($_SERVER['HTTP_REFERER'])    
    
header('Location : '.$_SERVER['HTTP_REFERER']);
    
exit;    
}

?>

<!-- XHTML code.. -->

<?php

$cnt = array();
$products = array();

foreach($_POST as $key=>$value)
{
    
$key=(int)str_replace('_cnt','',$key);
    
$products[]=$key;    // 将产品的ID编号放到数组products中去

    
$cnt[$key]=$value;    

$result = mysql_query("SELECT * FROM internet_shop WHERE id IN(".join($products,',').")");    // selecting all the products with the IN() function

if(!mysql_num_rows($result))    // 没找到相关产品
{
    
echo '<h1>There was an error with your order!</h1>';
}
else
{
    
echo '<h1>You ordered:</h1>';
    
while($row=mysql_fetch_assoc($result))
    {
        
echo '<h2>'.$cnt[$row['id']].' x '.$row['name'].'</h2>';
        
//计算总价格
        $total+=$cnt[$row['id']]*$row['price'];
    }

    
echo '<h1>Total: $'.$total.'</h1>';
}

?>

   这里,使用数组products保存了用户选择好的商品名称,而cnt数组则记录了每个商品购买的件数,最后实现效果如下:

AJAX/PHP/JQuery/CSS设计拖拉式购物车

0
相关文章