jQuery+Ajax+PHP+MySQL实现分类列表管理.docVIP

jQuery+Ajax+PHP+MySQL实现分类列表管理 2011-05-18 13:43 月光光 月光光 我要评论(0) 本文将采用Jquery+Ajax+PHP+MySQL来实现一个客户分类列表的管理，如何利用Ajax和Json技术让用户操作起来觉得更轻松，且看本文一一讲解 在实际应用中，我们要管理一个客户分类，实现对客户分类的增加、删除和修改等操作，如何让这些操作变得更人性化，让用户操作起来更加方便成了我们必须研究的课题。 本文将采用jQuery+Ajax+PHP+MySQL来实现一个客户分类列表的管理，如何利用Ajax和Json技术让用户操作起来觉得更轻松，且看本文一一讲解。 展示‖下载 准备阶段 您需要具备HTML和jQuery等前端知识，以及基本的PHP程序和MySQL数据库相关知识。要实现本文中的DEMO示例，首先需要一个MySQLl数据库： CREATE TABLE `catalist` ( `cid` int(11) NOT NULL auto_increment, `title` varchar(100) NOT NULL, `sort` mediumint(6) NOT NULL default 0, PRIMARY KEY (`cid`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; 其次在页面中引入jquery库，以及操作结果提示插件jNotify和删除确认插件hiAlert。 将需要准备的文件一并加入到index.php的head之间。 script type=text/javascript src=js/jquery.js/script script type=text/javascript src=js/jNotify.jquery.js/script script type=text/javascript src=js/jquery.alert.js/script script type=text/javascript src=js/global.js/script link rel=stylesheet type=text/css href=css/alert.css / 准备完毕我们进入主题。 index.php index.php是主体页面，读取了数据库中的分类数据，以列表展示，并提供了增加、删除和修改的功能按钮。 ?php include_once(connect.php); //连接数据库 $query = mysql_query(select * from catalist order by cid asc); while($row=mysql_fetch_array($query)){ $list .= li rel=.$row[cid].span class=del title=删除/span span class=edit title=编辑/spanspan class=txt.$row[title]./span/li; } ? 以上代码通过读取数据表中的数据，返回一个列表字符串。然后我们要将字符串输出到对应的列表中，代码如下： div class=selectlist h3客户类别/h3 ul id=catalist ?php echo $list;? /ul pa href=javascript:; onclick=addOpt()新增一项/a/p /div 试着往数据表中添加几条数据，可以看到一个分类列表。 CSS input{width:160px; padding:2px; border:1px solid #d3d3d3} cur_tr{background:#ffc} selectlist{width:280px; margin:30px auto; border:1px solid #ccc;} selectlist h3{height:32px; line-height:32px; padding:0 4px; border-bottom:1px dotted #d3d3d3; background:#f7f7f7} selectlist h3 span{float:right; font-weight:500} selectlist ul{margin-top:4px; margin-left:20px; list-style-type: d