Ajax留言板删除功能-优快云博客

======================================================
注：本文源代码点此下载
======================================================

ajax删除效果

在上一篇文章中,我们创建了一个ajax留言板程序,在本文中,进一步优化这个程序,给留言板加上删除功能。效果正如你在

http://www.css88.com/demo/ajax-deleet/中看到的一样,只不过我们也要同时更新数据库的信息。

要删除数据库中指定的数据,则必须要有主键的值,否则数据库不知道删哪一条,于是,我们在添加留言的时候就要将刚刚持久到数据库中的id返回,并写到dom中以便在删除的时候获取该id,则ajax处理类中的添加方法修改后如下:

代码

///

/// 新增留言

///

private void messageadd(message message, httpcontext context)

{

sqlhelper helper = new sqlhelper();

string cmdtext = "insert into tb_message_board(msg_user,msg_content,msg_face,msg_time) values('" +

message.msg_nickname + "','" + message.msg_content + "','" + message.msg_face + "','" + message.msg_time + "')";

if(helper.runsql(cmdtext, null))

{

//找出刚刚插进去的id值

datatable dt = helper.getdatatable("select top 1 msg_id from tb_message_board order by msg_time desc ");

context.response.write(dt.rows[0]["msg_id"].tostring());

}

else

{

context.response.write("-1");

}

当然前台在操作dom的方法中也要做相应的修改,修改后的代码如下:

代码

//使用ajax处理留言

$.ajax({

type: "post",

url: "ajax/messageboardhandler.ashx?action=add",

data: "msg_nickname=" + escape(msg_nickname) + "&msg_content=" + escape(msg_content) + "&msg_time=" + msg_time + "&msg_face=" + msg_face,

success: function (msg) {

//在table中新增一行

if (msg != "-1") {

$('#messagelist').append("

" + msg + "'>" + msg_face +

"' alt='' width='50' height='50' class='avatar' />

" + msg_nickname + "

" + msg_content + "

" + msg_time + "

" +

");

$('.delete').bind("click", s);

}

});

接下来,我们来写删除效果的代码,也是参考了之前的页面,不过修改了一个bug,就是连续点击不同留言的关闭图标后,会出现多个删除提示框的问题。

先来看一下,ajax处理类中删除指定id的留言的代码:

代码

///

/// 删除留言

///

private void messagedel(string id,httpcontext context)

{

sqlhelper helper = new sqlhelper();

string cmdtext = "delete from tb_message_board where msg_id='"+id+"'";

if (helper.runsql(cmdtext, null))

{

context.response.write("success");

}

else

{

context.response.write("fail");

}

前台的js代码如下:

代码

//删除留言

$(".delete").click(function s() {

var commentcontainer = $(this).parent();

$(".question").hide();

var id = commentcontainer.attr("id"); //获取留言的id值,

var string = 'id=' + id;

$(this).after('

你确定删除该评论吗?

确定取消

');

$(this).next('.question').animate({ opacity: 1 }, 300);

$('.yes').bind('click', function () {

$.ajax({

type: "post",

url: "ajax/messageboardhandler.ashx?action=del",

data: string,

cache: false,

success: function () {

commentcontainer.slideup('slow', function () { commentcontainer.remove(); });

}

});

return false;

});

$('.cancel').bind('click', function () {

$(this).parents('.question').fadeout(300, function () {

$(this).remove();

});

这里有一点要说明的就是虽然新增的留言class也是delete,但是他的click是不会触发的,除非我们重新绑定。

这里使用重新绑定:$('.delete').bind("click", s);//绑定click事件

最后的效果图如下:有渐变的效果

如果大家喜欢本文,请点击右下角的推荐,谢谢

作者:alexis

出处:http://www.cnblogs.com/alexis/

关于作者:专注于windows phone 7、silverlight、web前端(jquery)。

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过shuifengxuatgmail.com 联系我,非常感谢。

标签: jquery, ajax留言板, asp.net实例

绿色通道:好文要顶关注我收藏该文与我联系

posted @ 2010-12-26 19:32 alexis 阅读(2896) 评论(21)编辑收藏

发表评论

1998767

回复引用查看

#1楼 2010-12-26 19:42 saintloong

好文要顶,推荐一下!

回复引用查看

#2楼 2010-12-26 20:13 it鸟

//找出刚刚插进去的id值,,好像有点问题

回复引用查看

#3楼[楼主] 2010-12-26 20:15 alexis

@it鸟

我这边写的是最容易出错的方法,呵呵。愿闻其详

回复引用查看

#4楼 2010-12-26 20:26 辰

如果用jquery,效果会再提升一个数量级的。

现在我用jquery.alerts / jquery.jmoqal 已经完成了大部分复杂的特效了。

回复引用查看

#5楼 2010-12-26 20:26 辰

用jquery插件。。补充下。

回复引用查看

#6楼[楼主] 2010-12-26 20:29 alexis

@辰

呵呵,我已经好久没有整过jquery了,今天写jq代码的时候很是生疏

回复引用查看

#7楼 2010-12-26 21:28 欧阳寒玟

你的sqlhelper设计部合理。

回复引用查看

#8楼 2010-12-27 09:56 菜鸟老了

接下来加个版主回复和引用的功能哈

回复引用查看

#9楼 2010-12-27 09:56 菜鸟老了

接下来版主回复和引用的功能哈

回复引用查看

#10楼 2010-12-27 10:20 kurodo

你删条件用插入的时间,连查询刚插入的id都不用

回复引用查看

#11楼 2010-12-27 11:02 微软中国

我火狐貌似不兼容。弹不出来那个删除的。你们能不能显示出来。我ie正常

回复引用查看

#12楼[楼主] 2010-12-27 11:22 alexis

@微软中国

火狐我测过,没有问题的

回复引用查看

#13楼[楼主] 2010-12-27 11:22 alexis

@kurodo

额,用时间 ?

回复引用查看

#14楼 2010-12-27 11:40 kubage88

效果不错,但是用$.post()代码岂不是更简洁?

回复引用查看

#15楼 2010-12-27 12:49 喝水也会胖

这么做的话,有安全问题吧。。。服务端再判断权限?

回复引用查看

#16楼[楼主] 2010-12-27 12:52 alexis

@喝水也会胖

谢谢你的提醒,这里指示一个简单的示例,更多的功能需要发挥你们自己的才能去添加

回复引用查看

#17楼 2010-12-27 13:37 博采众长

感觉还是用ajaxpro.dll简单方便

回复引用查看

#18楼 2010-12-27 16:14 初中生的net梦

菜鸟路过学习下!

回复引用查看

#19楼[楼主] 2010-12-27 17:44 alexis

@博采众长

呵呵,还是理解原理了的比较好

回复引用查看

#20楼 2010-12-28 10:52 曾祥展

我以前看过外国那个ui了不错!

回复引用查看

#21楼 2010-12-28 10:53 曾祥展

我以前看过外国那个ui了不错!

注册用户登录后才能发表评论,请登录或注册,返回博客园首页。

首页博问闪存新闻园子招聘知识库

Ajax删除效果