Ajax删除效果

在上一篇文章中，我們建立了一個Ajax留言闆程式，在本文中，進一步優化這個程式，給留言闆加上删除功能。效果正如你在http://www.css88.com/demo/ajax-deleet/中看到的一樣，隻不過我們也要同時更新資料庫的資訊。

<a href="http://blog.51cto.com/attachment/201105/151033613.jpg" target="_blank"></a>

要删除資料庫中指定的資料，則必須要有主鍵的值，否則資料庫不知道删哪一條，于是，我們在添加留言的時候就要将剛剛持久到資料庫中的id傳回，并寫到DOM中以便在删除的時候擷取該id，則Ajax處理類中的添加方法修改後如下：

/// &lt;summary&gt; 

        /// 新增留言  

        /// &lt;/summary&gt; 

        /// &lt;param name="message"&gt;&lt;/param&gt; 

        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) + "&amp;msg_content=" + escape(msg_content) + "&amp;msg_time=" + msg_time + "&amp;msg_face=" + msg_face,  

                    success: function (msg) {  

                        //在table中新增一行  

                        if (msg != "-1") {  

                            $('#messagelist').append("&lt;div class='box clearfix' id='" + msg + "'&gt;&lt;img src='" + msg_face +  

                                "' alt='' width='50' height='50' class='avatar' /&gt;&lt;div class='text'&gt;&lt;strong&gt;&lt;a href='#'&gt;" + msg_nickname + "&lt;/a&gt;&lt;/strong&gt;&lt;p&gt;" + msg_content + "&lt;/p&gt;&lt;div class='date'&gt;" + msg_time + "&lt;/div&gt;&lt;/div&gt;" +  

                                "&lt;a href='#' class='delete'&gt;x&lt;/a&gt;&lt;/div&gt;");  

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

                        }  

                    }  

                }); 

接下來，我們來寫删除效果的代碼，也是參考了之前的頁面，不過修改了一個bug，就是連續點選不同留言的關閉圖示後，會出現多個删除提示框的問題。

先來看一下，Ajax處理類中删除指定id的留言的代碼：

        /// 删除留言  

        /// &lt;param name="id"&gt;&lt;/param&gt; 

        private void MessageDel(string id,HttpContext context)  

            string cmdText = "delete from TB_MESSAGE_BOARD where msg_id='"+id+"'";  

            if (helper.RunSQL(cmdText, null))  

                context.Response.Write("success");  

                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('&lt;div class="question"&gt;你确定删除該評論嗎？&lt;br/&gt; &lt;span class="yes"&gt;确定&lt;/span&gt;&lt;span class="cancel"&gt;取消&lt;/span&gt;&lt;/div&gt;');  

                $(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事件

 最後的效果圖如下：有漸變的效果

<a href="http://blog.51cto.com/attachment/201105/151248264.jpg" target="_blank"></a>

<a target="_blank" href="http://blog.51cto.com/attachment/201105/2621421_1306394005.rar"></a>

如果大家喜歡本文，請點選右下角的推薦，謝謝

<a href="http://down.51cto.com/data/2358227" target="_blank">附件：http://down.51cto.com/data/2358227</a>

    本文轉自xshf12345 51CTO部落格，原文連結：http://blog.51cto.com/alexis/574691如需轉載請自行聯系原作者