jQuery ajax删除
jQuery ajax删除<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>jQuery学习-ajax删除</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> h1{color:Green;} body{ background-color:#EEEEEE ; } .list{ background:#EEEEEE none repeat scroll 0 0; border-top:1px solid #CCCCCC; padding:5px 10px; width:300px; } .del{ color:Blue; display:block; float:right; width:35px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".del").click(function() { var $p = $(this).parent(); var $this = $(this); $.ajax({ type: "post", url: "http://hyipaying.com/demo/2010/10/delete.aspx", //得到id data: { id: $this.attr("id").replace('del-', '') }, beforeSend: function() { //发送请求前改变背景色 $p.css("backgroundColor", "#FB6C6C"); }, success: function() { //删除成功 $p.slideUp(300, function() { //移除父级div $p.remove(); }); } });//阻止浏览器默认事件return false; }); }); </script></head><body> <div> <h1>jQuery ajax删除</h1> <div class="list"> <a id="del-1" class="del" href="#">删除</a> <strong>jQuery学习,jQuery框架学习</strong> </div> <div class="list"> <a id="del-2" class="del" href="#">删除</a> <strong>jQuery学习,jQuery框架学习</strong> </div> <div class="list"> <a id="del-3" class="del" href="#">删除</a> <strong>jQuery学习,jQuery框架学习</strong> </div> <div class="list"> <a id="del-4" class="del" href="#">删除</a> <strong>jQuery学习,jQuery框架学习</strong> </div> <div class="list"> <a id="del-5" class="del" href="#">删除</a> <strong>jQuery学习,jQuery框架学习</strong> </div> </div></body></html>"
页:
[1]