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

开发 前端
本文将采用Jquery+Ajax+PHP+MySQL来实现一个客户分类列表的管理,如何利用Ajax和Json技术让用户操作起来觉得更轻松,且看本文一一讲解

在实际应用中,我们要管理一个客户分类,实现对客户分类的增加、删除和修改等操作,如何让这些操作变得更人性化,让用户操作起来更加方便成了我们必须研究的课题。

本文将采用jQuery+Ajax+PHP+MySQL来实现一个客户分类列表的管理,如何利用Ajax和Json技术让用户操作起来觉得更轻松,且看本文一一讲解。

采用Jquery+Ajax+PHP+MySQL实现分类列表管理 

展示下载

准备阶段

您需要具备HTML和jQuery等前端知识,以及基本的PHP程序和MySQL数据库相关知识。要实现本文中的DEMO示例,首先需要一个MySQLl数据库:

  1. CREATE TABLE `catalist` (   
  2.   `cid` int(11) NOT NULL auto_increment,   
  3.   `title` varchar(100) NOT NULL,   
  4.   `sort` mediumint(6) NOT NULL default '0',   
  5.   PRIMARY KEY  (`cid`)   
  6. ENGINE=MyISAM  DEFAULT CHARSET=utf8;  

其次在页面中引入jquery库,以及操作结果提示插件jNotify和删除确认插件hiAlert。

将需要准备的文件一并加入到index.php的<head>之间。

  1. <script type="text/javascript" src="js/jquery.js"></script>   
  2. <script type="text/javascript" src="js/jNotify.jquery.js"></script>   
  3. <script type="text/javascript" src="js/jquery.alert.js"></script>   
  4. <script type="text/javascript" src="js/global.js"></script>   
  5. <link rel="stylesheet" type="text/css" href="css/alert.css" />  

准备完毕我们进入主题。

index.php

index.php是主体页面,读取了数据库中的分类数据,以列表展示,并提供了增加、删除和修改的功能按钮。

  1. <?php   
  2. include_once('connect.php'); //连接数据库   
  3. $query = mysql_query("select * from catalist order by cid asc");   
  4. while($row=mysql_fetch_array($query)){   
  5.     $list ."<li rel='".$row['cid']."'><span class='del' title='删除'></span>   
  6.     <span class='edit' title='编辑'></span><span class='txt'>".$row['title']."</span></li>";   
  7. }   
  8. ?>  

以上代码通过读取数据表中的数据,返回一个列表字符串。然后我们要将字符串输出到对应的列表中,代码如下:

  1. <div class="selectlist">   
  2.     <h3>客户类别</h3>   
  3.     <ul id="catalist">   
  4.          <?php echo $list;?>   
  5.     </ul>   
  6.     <p><a href="javascript:;" onclick="addOpt()">新增一项</a></p>   
  7. </div>  

试着往数据表中添加几条数据,可以看到一个分类列表。

CSS

  1. input{width:160pxpadding:2pxborder:1px solid #d3d3d3}   
  2. cur_tr{background:#ffc}   
  3. selectlist{width:280pxmargin:30px auto;  border:1px solid #ccc;}   
  4. selectlist h3{height:32pxline-height:32pxpadding:0 4pxborder-bottom:1px dotted #d3d3d3;   
  5.  background:#f7f7f7}   
  6. selectlist h3 span{float:rightfont-weight:500}   
  7. selectlist ul{margin-top:4pxmargin-left:20pxlist-style-typedisc}   
  8. selectlist ul li{line-height:26px}   
  9. selectlist p{line-height:28pxpadding-left:6px}   
  10. selectlist ul li span{width:20pxheight:20px}   
  11. selectlist ul li span.edit{ float:right;background:url(images/edits.gif) no-repeat 0 5px;    
  12. cursor:pointer}   
  13. selectlist ul li span.del,.selectlist ul li span.dels,.selectlist ul li span.cancer{   
  14.  float:right;background:url(images/del.gif) no-repeat 0 5pxcursor:pointer}   
  15. selectlist ul li span.ok,.selectlist ul li span.oks{float:right;background:url(images/ok.gif)    
  16. no-repeat 0 5pxcursor:pointer}  

CSS我就不详细讲解,看下就明白了,最终显示的效果如图:

Jquery+Ajax+PHP+MySQL实现分类列表

新增项操作

在global.js加入addOpt()函数:

  1. function addOpt(){   
  2.     var str = "<li><span class='dels' title='取消'></span><span class='ok' title='保存'></span>   
  3.     <input type='text' class='input' /></li>";   
  4.     $("#catalist").append(str);   
  5. }  

通过单击“新增一项”链接,向DOM中添加了一个新增项的输入框。

当用户输入内容后,点击“保存”,将会触发一个ajax操作,先看代码:

  1. $(function(){   
  2.     //保存新增项   
  3.     $(".ok").live('click',function(){   
  4.         var btn = $(this);   
  5.         var input_str = btn.parent().find('input').val();   
  6.         if(input_str==""){   
  7.             jNotify("请输入类别!");   
  8.             return false;   
  9.         }   
  10.         var str = escape(input_str);   
  11.         $.getJSON("post.php?action=add&title="+str,function(json){   
  12.             if(json.success==1){   
  13.                 var li = "<li rel='"+json.id+"'><span class='del' title='删除'>   
  14.                 </span><span class='edit' title='编辑'></span><span class='txt'>"+   
  15.                 json.title+"</span></li>";   
  16.                 $("#catalist").append(li);   
  17.                 btn.parent().remove();   
  18.                 jSuccess("恭喜,操作成功!");   
  19.             }else{   
  20.                 jNotify("出错了!");   
  21.                 return false;   
  22.             }   
  23.         });   
  24.     });   
  25. });  

首先获取用户输入的内容,如果没有输入任何内容则提示用户输入内容,然后将用户输入的内容进行escape编码,保证中文字符能正确传输给后台程序识别。然后通过$.getJSON方法向后台post.php发起一个异步的Ajax请求。后台post.php接收参数值并进行相关处理,前端代码通过响应后台返回的JSON数据,如果新增成功,则向列表后面追加一项,并提示用户“操作成功”,如果失败则提示用户“出错了”。

如果要取消新增项操作,只需当单击“取消”按钮时执行以下代码:

  1. //取消新增项   
  2. $(".dels").live('click',function(){   
  3.      $(this).parent().remove();  //将新增项移除   
  4. });  

后台post.php需要处理新增项内容,代码如下:

  1. include_once('connect.php'); //连接数据库   
  2. $action = $_GET['action'];   
  3. switch($action){   
  4.     case 'add':  //新增项   
  5.        $title = uniDecode($_GET['title'],'utf-8');   
  6.        $title = htmlspecialchars($title,ENT_QUOTES);   
  7.        $query = mysql_query("insert into catalist (cid,title) values (NULL,'$title')");   
  8.        if($query){   
  9.            $insertid = mysql_insert_id($link);   
  10.            $arr = array('id'=>$insertid,'title'=>$title,'success'=>1);   
  11.        }else{   
  12.            $arr = array('success'=>2);   
  13.        }   
  14.        echo json_encode($arr);   
  15.        break;   
  16.      case '':   
  17.        break;   
  18. }  

通过接收前端提交的内容,进行解码后,写入数据表中,并输出JSON数据格式供前台处理。关于uniDecode()函数,读者可以下载源码了解,主要是为了正确读取解析jquery通过异步提交的中文字符串。

添加项操作已经完成,下面请看删除项操作。

删除项操作

回到global.js,在$(function(){})加入下面的代码:

  1. //删除项   
  2.     $(".del").live('click',function(){   
  3.         var btn = $(this);   
  4.         var id = btn.parent().attr('rel');   
  5.         var URL = "post.php?action=del";   
  6.         hiConfirm('您确定要删除吗?''提示',function(r){   
  7.             if(r){   
  8.               $.ajax({   
  9.                 type: "POST",   
  10.                 url: URL,   
  11.                 data: "id="+id,   
  12.                 success: function(msg){   
  13.                    if(msg==1){   
  14.                        jSuccess("删除成功!");   
  15.                        btn.parent().remove();   
  16.                    }else{   
  17.                        jNotify("操作失败!");   
  18.                        return false;   
  19.                    }   
  20.                 }   
  21.              });   
  22.             }   
  23.         });   
  24.     });  

显然,通过单击“删除”按钮,同样是向后台post.php发送一个ajax请求,将删除项对应的参数ID发送给后台并响应后台处理结果,如果成功,则提示用户“删除成功”,并通过remove()将数据项移除,如果失败,则提示“操作失败”。

后台post.php接收参数并作出相应的处理:

  1. case 'del':  //删除项   
  2.     $id = $_POST['id'];   
  3.     $query = mysql_query("delete from catalist where cid=".$id);   
  4.     if($query){   
  5.         echo '1';   
  6.     }else{   
  7.         echo '2';   
  8.     }   
  9.     break;  

以上这段代码片段,加在post.php的switch语句中,执行了删除语句,并输出执行结果供前端处理。

#p#

在上篇中,我们详细讲解了如何实现列表管理的新增和删除操作,可以看出,前端页面通过ajax与后台通信,根据后台处理结果响应前端页面交互操作,这是一个很典型的Ajax和JSON应用的例子。

编辑项操作

用户通过单击“编辑”按钮,相应的项会立即变为编辑状态,出现一个输入框,用户可以重新输入新的内容,然后点击“保存”按钮完成编辑操作,也可以单击“取消”按钮取消编辑状态。

首先,通过单击“编辑”按钮,实现编辑状态,在global.js的$(function(){...})中加入如下代码:

  1. //编辑选项   
  2. $(".edit").live('click',function(){   
  3.     $(this).removeClass('edit').addClass('oks').attr('title','保存');   
  4.     $(this).prev().removeClass('del').addClass('cancer').attr('title','取消');   
  5.     var str = $(this).parent().text();   
  6.     var input = "<input type='text' class='input' value='"+str+"' />";   
  7.     $(this).next().wrapInner(input);   
  8. });  

从代码中可以看出,其实是改变了“编辑”按钮和“删除”按钮的class样式,修改了其title属性,然后将分类名称用一个input输入框包裹(wrapInner),这样就生成了一个编辑状态。

要将修改好的内容提交给后台处理,通过单击“保存”按钮,会发生下面的事情,请看代码:

  1. //编辑处理   
  2. $(".oks").live('click',function(){   
  3.     var input_str = $(this).parent().find('input').val();   
  4.     if(input_str==""){   
  5.         jNotify("请输入类别名称!");   
  6.         return false;   
  7.     }   
  8.     var str = escape(input_str);   
  9.     var id = $(this).parent().attr("rel");   
  10.     var URL = "post.php?action=edit";   
  11.            
  12.     var btn = $(this);   
  13.     $.ajax({   
  14.             type: "POST",   
  15.             url: URL,   
  16.             data: "title="+str+"&id="+id,   
  17.             success: function(msg){   
  18.                 if(msg==1){   
  19.                     jSuccess("编辑成功!");   
  20.                     var strs = "<span class='del' title='删除'></span><span class='edit'   
  21.                     title='编辑'></span><span class='txt'>"+input_str+"</span>;   
  22.                     btn.parent().html(strs);   
  23.                 }else{   
  24.                     jNotify("操作失败!");   
  25.                     return false;   
  26.                 }   
  27.            }   
  28.     });   
  29. });  

通过单击编辑状态下的“保存”按钮,首先获取输入框的内容,如果没有输入任何内容则提示用户输入内容,然后将用户输入的内容进行escape编码,同时还要获取编辑项对应的ID,将输入的内容和ID作为参数通过$.ajax提交给后台post.php处理,并响应后台返回的信息,如果返回成功,则提示用户“编辑成功”,并且解除编辑状态,如果返回失败,则提示用户“操作失败”。

后台post.php处理编辑项操作与上篇的新增项操作差不多,代码如下:

  1. case 'edit':  //编辑项   
  2.     $id = $_POST['id'];   
  3.     $title = uniDecode($_POST['title'],'utf-8');   
  4.     $title = htmlspecialchars($title,ENT_QUOTES);   
  5.     $query = mysql_query("update catalist set title='$title' where cid='$id'");   
  6.     if($query){   
  7.         echo '1';   
  8.     }else{   
  9.         echo '2';   
  10.     }   
  11.     break;  

以上代码片段加在post.php的switch语句中,代码接收了前端传来的id和title参数,并对title参数进行解码,然后更新数据表中对应的项,并输出执行结果给前台处理。

要取消编辑状态,则通过单击“取消”执行以下代码:

  1. //取消编辑   
  2. $(".cancer").live('click',function(){   
  3.     var li = $(this).parent().html();   
  4.     var str_1 = $(this).parent().find('input').val();   
  5.     var strs = "<span class='del' title='删除'></span><span class='edit' title='编辑'>   
  6.     </span><span class='txt'>"+str_1+"</span>";   
  7.     $(this).parent().html(strs);   
  8. });  

其实,代码重新组装了一个字符串,重新将组装的字符串替代了编辑状态,即取消了编辑状态。

总结

通过这样一个实际应用的案例,我们可以体验前端技术的优越性,用户完成的每一步操作是那么的友好,这是用户体验的一个方面。Jquery库让ajax操作变得如此简单,文中代码中还用到了jquery的live方法,这是为了绑定动态创建DOM元素所必需的。此外,文中没有提到验证输入类表的重复性,这个是需要后台验证的,读者朋友们可以自行写一段验证代码。最后,顺便提一下,如果本例再加上一个拖动排序的功能,是不是会更完美呢?关于拖动排序的实现,helloweba.com也有相关实例讲解,各位读者朋友可以先熟知。

原文链接:http://www.helloweba.com/view-blog-127.html

【编辑推荐】

  1. 基于jQuery与PHP实现Ajax长轮询(LongPoll)
  2. 如何理解与简化jQuery的closest函数
  3. jQuery调用WCF开发实例经验分享
  4. 从零开始学习jQuery之管理jQuery包装集
  5. jQuery性能指标和调优
责任编辑:陈贻新 来源: 月光光
相关推荐

2009-12-07 11:31:51

PHP分类列表

2017-10-11 18:17:06

大数据数据可视化前后端

2011-05-18 13:28:46

jQueryPHPAJAX

2012-02-08 17:01:36

2011-03-23 10:55:55

PHPMySQLjQuery

2010-10-27 10:02:36

PHP

2012-05-02 10:41:31

ASP.NET

2010-10-25 10:07:48

jQuery

2012-04-27 10:13:30

jQuery Ajax

2009-06-26 13:46:13

Struts

2011-04-14 10:08:04

AJAXPHPJQuery

2010-12-28 13:44:12

PHPXMLjQuery

2013-12-02 14:40:03

jQueryAjax

2009-11-24 16:09:44

PHP Ajax

2010-06-04 10:40:55

AJAX MySQL

2011-06-17 10:11:01

jQueryPHP

2011-01-24 13:20:49

2009-09-07 14:41:48

GridView展开与

2009-12-07 12:56:40

PHP文件管理

2011-10-28 14:01:30

jQuery
点赞
收藏

51CTO技术栈公众号