【示例】
-
HTML
<div id="container"> <h3>留言内容</h3> <div id="load" align="center"> <!--删除时显示的异步加载进度条--> <img src="images/loading.gif" width="28" height="28" align="absmiddle"> Loading...</div> 单击 x 可以删除一条注释<br> <br> <div class="box"> <div class="text"><span>张三</span><br> 很好用的留言本 <div class="date">2018-02-13</div> </div> <!--删除链接,每个链接的id值,指向数据库中当前的记录id--> <a href="#" id="1" class="delete">x</a> <div class="clear"></div> </div> <div class="box"> <div class="text"><span>李四</span><br> 这是使用$.ajax实现的异步删除功能<a href="#" target="_blank"></a> <div class="date">2018-04-18</div> </div> <a href="#" id="2" class="delete">x</a> <div class="clear"></div> </div> <div class="box"> <div class="text"><span>赵六</span><br> 这个功能真的很不错 <div class="date">2018-04-21</div> </div> <a href="#" id="3" class="delete">x</a> <div class="clear"></div> </div> </div>
-
JS
$(document).ready(function() { $('#load').hide(); //隐藏加载图片,只在需要时显示 }); $(function() { $(".delete").click(function() { //当删除按钮被单击时 $('#load').fadeIn(); //淡出显示加载图片 var commentContainer = $(this).parent(); //得到当前链接所在的容器div var id = $(this).attr("id"); //得到当前链接的id值 var string = 'id='+ id ; //构建参数字符串 $.ajax({ //调用$.ajax发送异步Ajax请求 type: "POST", //指定提交方式为POST url: "ajax_delete_Server.php", //服务器端的URL data: string, //传递的参数字符串 cache: false, //不缓存 success: function(){ //成功删除后,移除留言记录 commentContainer.slideUp('slow', function() {$(this).remove();}); $('#load').fadeOut(); //隐藏显示加载图标 } }); return false; }); });