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

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;  

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

   
    
客户类别
   
       
            
       
    
新增一项
   

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

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: disc}   
selectlist ul li{line-height:26px}   
selectlist p{line-height:28px; padding-left:6px}   
selectlist ul li span{width:20px; height:20px}   
selectlist ul li span.edit{ float:right;background:url(images/edits.gif) no-repeat 0 5px;    
cursor:pointer}   
selectlist ul li span.del,.selectlist ul li span.dels,.selectlist ul li span.cancer{   
 float:right;background:url(images/del.gif) no-repeat 0 5px; cursor:pointer}   
selectlist ul li span.ok,.selectlist ul li span.oks{float:right;background:url(images/ok.gif)    
no-repeat 0 5px; cursor:pointer}  

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

新增项操作

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

function addOpt(){   
    var str = "
   
    
";   
    $("#catalist").append(str);   
}  

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

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

$(function(){   
    //保存新增项   
    $(".ok").live('click',function(){   
        var btn = $(this);   
        var input_str = btn.parent().find('input').val();   
        if(input_str==""){   
            jNotify("请输入类别!");   
            return false;   
        }   
        var str = escape(input_str);   
        $.getJSON("post.php?action=add&title="+str,function(json){   
            if(json.success==1){   
                var li = "   
                "+   
                json.title+"
";   
                $("#catalist").append(li);   
                btn.parent().remove();   
                jSuccess("恭喜，操作成功!");   
            }else{   
                jNotify("出错了！");   
                return false;   
            }   
        });   
    });   
});  

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

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

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

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

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

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

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

删除项操作

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

//删除项   
    $(".del").live('click',function(){   
        var btn = $(this);   
        var id = btn.parent().attr('rel');   
        var URL = "post.php?action=del";   
        hiConfirm('您确定要删除吗？', '提示',function(r){   
            if(r){   
              $.ajax({   
                type: "POST",   
                url: URL,   
                data: "id="+id,   
                success: function(msg){   
                   if(msg==1){   
                       jSuccess("删除成功!");   
                       btn.parent().remove();   
                   }else{   
                       jNotify("操作失败!");   
                       return false;   
                   }   
                }   
             });   
            }   
        });   
    });  

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

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

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

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

#p#

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

编辑项操作

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

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

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

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

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

//编辑处理   
$(".oks").live('click',function(){   
    var input_str = $(this).parent().find('input').val();   
    if(input_str==""){   
        jNotify("请输入类别名称!");   
        return false;   
    }   
    var str = escape(input_str);   
    var id = $(this).parent().attr("rel");   
    var URL = "post.php?action=edit";   
           
    var btn = $(this);   
    $.ajax({   
            type: "POST",   
            url: URL,   
            data: "title="+str+"&id="+id,   
            success: function(msg){   
                if(msg==1){   
                    jSuccess("编辑成功!");   
                    var strs = "
                    title='编辑'>"+input_str+";   
                    btn.parent().html(strs);   
                }else{   
                    jNotify("操作失败!");   
                    return false;   
                }   
           }   
    });   
});  

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

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

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

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

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

//取消编辑   
$(".cancer").live('click',function(){   
    var li = $(this).parent().html();   
    var str_1 = $(this).parent().find('input').val();   
    var strs = "   
    "+str_1+"";   
    $(this).parent().html(strs);   
});  

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

总结

通过这样一个实际应用的案例，我们可以体验前端技术的优越性，用户完成的每一步操作是那么的友好，这是用户体验的一个方面。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性能指标和调优