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

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

创新互联主要从事成都网站设计、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务市中,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

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

展示‖下载

准备阶段

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

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

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

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

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.   
    5. 
  
  
  
  
  5.  
    6.

准备完毕我们进入主题。

index.php

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. include_once('connect.php'); //连接数据库  
    3. 
  
  
  
  
  3. $query = mysql_query("select * from catalist order by cid asc");  
    4. 
  
  
  
  
  4. while($row=mysql_fetch_array($query)){  
    5. 
  
  
  
  
  5.     $list .= "  
    6. 
  
  
  
  
  6.     ".$row['title']."
    7. ";  
  
  
  
  
  7. }  
    8. 
  
  
  
  
  8. ?> 
    9.

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

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.     
    客户类别
      
    3. 
  
  
  
  
  3.       
    4. 
  
  
  
  
  4.            
    5. 
  
  
  
  
  5.       
    6. 
  
  
  
  
  6.     
    新增一项
      
    7.
 

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

CSS

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

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

新增项操作

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

 
 
 
 
    
  
  
  
  
  1. function addOpt(){  
    2. 
  
  
  
  
  2.     var str = "
  3.   
    4. 
  
  
  
  
  4.     
    5. ";  
  
  
  
  
  5.     $("#catalist").append(str);  
    6. 
  
  
  
  
  6. } 
    7.

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

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

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

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

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

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

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

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

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

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

删除项操作

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

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

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

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

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

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

#p#

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

编辑项操作

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

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

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

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

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

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

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

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

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

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

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

 
 
 
 
    
  
  
  
  
  1. //取消编辑  
    2. 
  
  
  
  
  2. $(".cancer").live('click',function(){  
    3. 
  
  
  
  
  3.     var li = $(this).parent().html();  
    4. 
  
  
  
  
  4.     var str_1 = $(this).parent().find('input').val();  
    5. 
  
  
  
  
  5.     var strs = "  
    6. 
  
  
  
  
  6.     "+str_1+"";  
    7. 
  
  
  
  
  7.     $(this).parent().html(strs);  
    8. 
  
  
  
  
  8. }); 
    9.

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

总结

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

新闻标题：jQuery+Ajax+PHP+MySQL实现分类列表管理
URL地址：http://www.shufengxianlan.com/qtweb/news14/88814.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

微信公众号知识

各行业网站

成都企业网站维护　　 　古巴雪茄　　 　青羊区雕琢时光　　 　水泥基自流平　　 　防护网厂　　 　成都网站建设　　 　成都网站设计　　 　成都网站优化　　 　成都免费网站建设公司　　 　做手机网站　　 　成都网站维护　　 　成都网站制作　　 　成都网站改版　　 　德阳机房托管　　 　成都店面装修公司　　 　移动服务器托管　　 　网站建设　　 　雅安服务器托管　　 　安卓开发　　 　网站免费收录