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

前端之家收集整理的这篇文章主要介绍了Jquery+Ajax+PHP+MySQL实现分类列表管理(下)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

编辑项操作

用户通过单击“编辑”按钮,相应的项会立即变为编辑状态,出现一个输入框,用户可以重新输入新的内容,然后点击“保存”按钮完成编辑操作,也可以单击“取消”按钮取消编辑状态。 首先,通过单击“编辑”按钮,实现编辑状态,在global.js的$(function(){...})中加入如下代码

"; $(this).next().wrapInner(input); });

代码中可以看出,其实是改变了“编辑”按钮和“删除”按钮的class样式,修改了其title属性,然后将分类名称用一个input输入框包裹(wrapInner),这样就生成了一个编辑状态。 要将修改好的内容提交给后台处理,通过单击“保存”按钮,会发生下面的事情,请看代码

名称!"); 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='edit'
title='编辑'>"+input_str+";
btn.parent().html(strs);
}else{
jNotify("操作失败!");
return false;
}
}
});
});

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

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参数进行解码,然后更新数据表中对应的项,并输出执行结果给前台处理。 要取消编辑状态,则通过单击“取消”执行以下代码

PHP;"> //取消编辑 $(".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元素所必需的。

上面两篇就是小编为大家整理的关于Jquery+Ajax+PHP+MysqL实现分类列表管理的全部内容,希望对大家的学习有所帮助。

猜你在找的Ajax相关文章