DIV CSS 佈局教程網

在上一篇文章中，我們創建了一個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事件

 

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