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

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

 

 

  

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