Jquery+Ajax+PHP+MySQL实现分类列表管理(下)

本文将通过整合JQuery、Ajax、PHP以及MySQL技术，实现一个客户分类列表的管理系统。我们将深入如何利用Ajax和Json技术，以更加轻松的方式实现用户操作体验。对于热衷于的小伙伴们，这是一个值得参考的旅程。

在上篇内容中，我们详细介绍了如何实现列表管理的新增和删除操作。前端页面通过ajax与后台进行通信，根据后台的处理结果来响应前端页面的交互操作。这种前后端交互的方式，是Ajax和JSON技术的一个典型应用实例。

本文将在此基础上，继续讲解如何通过编辑操作完善这一管理系统。当用户点击“编辑”按钮时，相应的项目会立即进入编辑状态。会出现一个输入框，用户可以在其中输入新的内容。之后，用户可以点击“保存”按钮来完成编辑操作，或者点击“取消”按钮来取消编辑状态。

编辑功能的实现过程如下：

用户通过点击“编辑”按钮，触发编辑状态。在global.js的$(function(){...})中加入以下代码：

//编辑选项

$(".edit").on('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().empty().append(input);

});

上述代码通过改变“编辑”按钮的样式和title属性，同时将分类名称包裹在一个input输入框中，从而生成编辑状态。

接下来是提交修改后的内容给后台处理的部分，当用户点击“保存”按钮时，会发生类似于网站SEO优化的动作。代码如下：

//编辑处理

$(".oks").on('click',function(){

var input_str = $(this).parent().find('input').val();

if(input_str==""){

jNotify("请输入类别名称!");

return false;

}

var str = encodeURIComponent(input_str);

var id = $(this).parent().attr("rel");

var URL = "post.php?action=edit";

$.ajax({

type: "POST",

url: URL,

data: "title="+str+"&id="+id,

success: function(msg){

if(msg==1){

jSuccess("编辑成功!");

var strs = ""+input_str+"";

$(this).parent().html(strs);

}else{

jNotify("操作失败!");

}

}

});

});

这段代码通过点击编辑状态下的“保存”按钮，获取输入框中的内容。如果用户没有输入任何内容，将提示用户进行输入。然后，对输入的内容进行编码，并获取编辑项对应的ID。接着，将输入的内容和ID作为参数通过Ajax提交给后台的post.php进行处理。根据后台返回的信息，前端进行相应的提示操作，如“编辑成功”或“操作失败”，并解除编辑状态。

通过这一系列操作，我们实现了利用Ajax和Json技术，以更轻松的方式管理客户分类列表的目标。这使得用户操作更加便捷，提高了用户体验。后台post.php在处理编辑项操作方面，与之前的处理新增项操作颇为相似。让我们一同这段代码背后的奥秘。

在编辑项（case 'edit'）的流程中，后台接收来自前端的id和title参数。对title参数进行必要的解码处理，确保其以UTF-8的编码格式展现。然后，利用mysql_query函数更新数据表中对应的项。如果更新成功，向前台反馈'1'，表示操作顺利；若更新失败，则反馈'2'，提示前台处理异常情况。

当我们想要取消编辑状态时，一段精心编写的jQuery代码将发挥作用。通过点击带有“.cancer”类的元素，我们可以捕捉到取消编辑的指令。随后，代码会获取当前父元素中的HTML内容以及输入框的值，并重新构建一个包含删除和编辑按钮以及原有文本内容的字符串。这个新字符串将替代原有的编辑状态，从而取消编辑。

这一过程充分展示了前端技术的优越性，每一步操作都为用户带来流畅的体验。jQuery库使得ajax操作变得简单易懂，而在这里，我们更是用到了jQuery的live方法。这是因为我们需要绑定动态创建的DOM元素，而live方法正是为此而生。

在长沙网络推广的分享中，关于利用Jquery、Ajax、PHP和MySQL实现分类列表管理的技术已经为大家梳理得十分清晰。这两篇内容涵盖了从前端到后端的全栈技术，对于希望深入学习相关技术的人来说，无疑是一份宝贵的资料。

让我们再次回顾这段神奇的代码：在后台post.php中，我们处理编辑请求，更新数据库；在前端，我们用jQuery和Ajax响应用户的每一个动作，营造流畅的用户体验。这背后是技术的力量，也是我们对完美的追求。我们期待你在学习与实践的过程中，能够感受到技术的魅力，并将其转化为出色的用户体验。

让我们用一句代码结束这次分享：cambrian.render('body')。愿你在技术的海洋中畅游，不断、不断进步！