在上一篇文章中，我们创建了一个Ajax留言板程序，在本文中，进一步优化这个程序，给留言板加上删除功能。效果正如你在http://www.css88.com/demo/ajax-deleet/中看到的一样，只不过我们也要同时更新数据库的信息。

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

1. /// <summary> 
2.         /// 新增留言  
3.         /// </summary> 
4.         /// <param name="message"></param> 
5.         private void MessageAdd(Message message, HttpContext context)  
6.         {  
7.             SQLHelper helper = new SQLHelper();  
8.             string cmdText = "INSERT INTO TB_MESSAGE_BOARD(MSG_USER,MSG_CONTENT,MSG_FACE,MSG_TIME) VALUES('" +  
9.                 message.Msg_nickname + "','" + message.Msg_content + "','" + message.Msg_face + "','" + message.Msg_time + "')";  
10.             if(helper.RunSQL(cmdText, null))  
11.             {  
12.                 //找出刚刚插进去的id值  
13.                 DataTable dt = helper.getDataTable("select top 1 msg_id from TB_MESSAGE_BOARD order by MSG_TIME desc ");  
14.                 context.Response.Write(dt.Rows[0]["msg_id"].ToString());  
15.             }  
16.             else  
17.             {  
18.                 context.Response.Write("-1");  
19.             }     
20.         } 

当然前台在操作DOM的方法中也要做相应的修改，修改后的代码如下：

1. //使用ajax处理留言  
2.                 $.ajax({  
3.                     type: "POST",  
4.                     url: "Ajax/MessageBoardHandler.ashx?action=add",  
5.                     data: "msg_nickname=" + escape(msg_nickname) + "&msg_content=" + escape(msg_content) + "&msg_time=" + msg_time + "&msg_face=" + msg_face,  
6.                     success: function (msg) {  
7.                         //在table中新增一行  
8.                         if (msg != "-1") {  
9.                             $('#messagelist').append("<div class='box clearfix' id='" + msg + "'><img src='" + msg_face +  
10.                                 "' alt='' width='50' height='50' class='avatar' /><div class='text'><strong><a href='#'>" + msg_nickname + "</a></strong><p>" + msg_content + "</p><div class='date'>" + msg_time + "</div></div>" +  
11.                                 "<a href='#' class='delete'>x</a></div>");  
12.                             $('.delete').bind("click", s);  
13.                         }  
14.                     }  
15.                 }); 

1. /// <summary> 
2.         /// 删除留言  
3.         /// </summary> 
4.         /// <param name="id"></param> 
5.         private void MessageDel(string id,HttpContext context)  
6.         {  
7.             SQLHelper helper = new SQLHelper();  
8.             string cmdText = "delete from TB_MESSAGE_BOARD where msg_id='"+id+"'";  
9.             if (helper.RunSQL(cmdText, null))  
10.             {  
11.                 context.Response.Write("success");  
12.             }  
13.             else  
14.             {  
15.                 context.Response.Write("fail");  
16.             }  
17.         } 

前台的js代码如下：

1. //删除留言  
2.             $(".delete").click(function s() {  
3.                 var commentContainer = $(this).parent();  
4.                 $(".question").hide();  
5.                 var id = commentContainer.attr("id"); //获取留言的id值，  
6.                 var string = 'id=' + id;  
7.                 $(this).after('<div class="question">你确定删除该评论吗？<br/> <span class="yes">确定</span><span class="cancel">取消</span></div>');  
8.                 $(this).next('.question').animate({ opacity: 1 }, 300);  
9.                 $('.yes').bind('click', function () {  
10.                     $.ajax({  
11.                         type: "POST",  
12.                         url: "Ajax/MessageBoardHandler.ashx?action=del",  
13.                         data: string,  
14.                         cache: false,  
15.                         success: function () {  
16.                             commentContainer.slideUp('slow', function () { commentContainer.remove(); });  
17.                         }  
18.                     });  
19.                     return false;  
20.                 });  
21.  
22.                 $('.cancel').bind('click', function () {  
23.                     $(this).parents('.question').fadeOut(300, function () {  
24.                         $(this).remove();  
25.                     });  
26.                 });  
27.             }); 

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

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

 

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

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