======================================================
注:本文源代码点此下载
======================================================
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_content + "
" + msg_time + "
" +
"x
");
$('.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了不错!
注册用户登录后才能发表评论,请 登录 或 注册,返回博客园首页。
最新it新闻:
·android平台12月广告浏览份额51.6% 超越ios
» 更多新闻...
最新知识库文章:
======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定 这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/