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

在上篇中，我们详细讲解了如何实现列表管理的新增和删除操作，可以看出，前端页面通过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 = "<input type='text' class='input' value='"+str+"' />"; 
    $(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 = "<span class='del' title='删除'></span><span class='edit' 
                    title='编辑'></span><span class='txt'>"+input_str+"</span>; 
                    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 = "<span class='del' title='删除'></span><span class='edit' title='编辑'> 
    </span><span class='txt'>"+str_1+"</span>"; 
    $(this).parent().html(strs); 
}); 

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

总结

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

声明：本文为原创文章，helloweba.com和作者拥有版权，如需转载，请注明来源于 helloweba.com并保留原文链接，否则视为侵权。