Ajax删除效果

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

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

/// <summary> 
        /// 新增留言  
        /// </summary> 
        /// <param name="message"></param> 
        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("<div class='box clearfix' id='" + msg + "'><img src='" + msg_face +  
                                "' 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>" +  
                                "<a href='#' class='delete'>x</a></div>");  
                            $('.delete').bind("click", s);  
                        }  
                    }  
                }); 

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

先来看一下，Ajax处理类中删除指定id的留言的代码：

/// <summary> 
        /// 删除留言  
        /// </summary> 
        /// <param name="id"></param> 
        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('<div class="question">你确定删除该评论吗？<br/> <span class="yes">确定</span><span class="cancel">取消</span></div>');  
                $(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事件

 

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

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