background image

在电子商务网站的建设中,购物车这个功能是不能缺少的。而编写购物车的方法也是多种
多样,有的简单有的复杂,而在本文中,将带领大家使用 PHP,JQuery 和 CSS 和 AJAX 技
术,去设计一个拖拉式的购物车,这个购物车的效果比较酷,当你选择好要购买的商品
后,直接用鼠标拖拉到一个购物篮的图标中去,则完成一次购物的过程,跟在超市购物
的过程有点相像。本文将使用 MySQL 数据库,并且用到了 jQuery 中的一个很好用的插件
simpletip,接下来会介绍其详细的用法。

  步骤 1、建立 Mysql 数据库

  首先,为我们的购物车应用建立如下的 mysql 数据库文件,下面给出表结构,并添
加一些样例数据:

CREATE TABLE IF NOT EXISTS `internet_shop` (
  `id` int(6) NOT NULL auto_increment,
  `img` varchar(32) collate utf8_unicode_ci NOT NULL default '',
  `name` varchar(64) collate utf8_unicode_ci NOT NULL default '',
  `description` text collate utf8_unicode_ci NOT NULL,
  `price` double NOT NULL default '0',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `img` (`img`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci 
AUTO_INCREMENT=7 ;

INSERT INTO `internet_shop` VALUES(1, 'iPod.png', 'iPod', 'The original and popular iPod.', 
200);
INSERT INTO `internet_shop` VALUES(2, 'iMac.png', 'iMac', 'The iMac computer.', 1200);
INSERT INTO `internet_shop` VALUES(3, 'iPhone.png', 'iPhone', 'This is the new iPhone.', 400);
INSERT INTO `internet_shop` VALUES(4, 'iPod-Shuffle.png', 'iPod Shuffle', 'The new iPod 
shuffle.', 49);
INSERT INTO `internet_shop` VALUES(5, 'iPod-Nano.png', 'iPod Nano', 'The new iPod Nano.', 
99);
INSERT INTO `internet_shop` VALUES(6, 'Apple-TV.png', 'Apple TV', 'The new Apple TV. Buy 
it now!', 300);
   这里我们只是简单地设计了商品的属性表,其中包括了商品的图片,名称,价格和
描述,在实际的应用中,可能会设计更复杂的商品属性。

 

  步骤 2、设计页面结构

  接下来,我们开始设计我们的页面结构,HTML 代码如下:

<

div 

id

="main-container">

 

<!

—主 DIV --

>