首页>>Jquery文字>>无刷新删除记录(2014-12-20)

无刷新删除记录

为了保持始终可以给所有人演示， 本例的删除被注释掉。

无刷新删除记录
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(document).ready(function() {  
  3.     $('#load').hide();                             //隐藏加载图片，只在需要时显示  
  4. });  
  5. $(function() {  
  6.     $(".delete").click(function() {             //当删除按钮被单击时  
  7.         $('#load').fadeIn();                      //淡出显示加载图片  
  8.         var commentContainer = $(this).parent(); //得到当前链接所在的容器div  
  9.         var id = $(this).attr("id");             //得到当前链接的id值  
  10.         var string = 'id='+ id ;                  //构建参数字符串           
  11.         $.ajax({                                  //调用$.ajax发送异步Ajax请求  
  12.            type: "POST",                          //指定提交方式为POST  
  13.            url: "delete.php",                 //服务器端的URL  
  14.            data: string,                          //传递的参数字符串  
  15.            cache: false,                         //不缓存  
  16.            success: function(){                 //成功删除后，移除留言记录  
  17.             commentContainer.slideUp('slow', function() {$(this).remove();});  
  18.             $('#load').fadeOut();                //隐藏显示加载图标  
  19.           }          
  20.          });  
  21.          return false;  
  22.         });  
  23. });  
  24. </script>  
PHP Code
  1. <div id="container">  
  2.     
  3.   <div id="load" align="center">  
  4.          <!--删除时显示的异步加载进度条-->  
  5.         <img src="loading.gif" width="28" height="28" align="absmiddle"/> Loading...</div>  
  6.     单击 x 可以删除一条记录<br/>  
  7.     <br/>  
  8.     <?php   
  9.                                   
  10.             $query = mysql_query("SELECT * FROM comments");  
  11.                 $j=0;  
  12.                 while($row=mysql_fetch_array($query))  
  13.             {$j=$j+1;  
  14.               
  15.             ?>  
  16.             
  17.   <div class="box">  
  18.     <div class="text"><span><?php echo $row['name']?></span><br/>  
  19.       <?php echo $row['body']?>  
  20.         <div class="date"><?php echo $row['dt']?></div>  
  21.     </div>  
  22.     <!--删除链接，每个链接的id值，指向数据库中当前的记录id-->  
  23.     <a href="#" id="<?php echo $row['id']?>" class="delete">x</a>  
  24.     <div class="clear"></div>  
  25.   </div>  
  26.    <?php  
  27.             }    ?>  
  28. </div>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_449.html