jQuery ajax剔除
日期：2014-05-16 浏览次数：20721 次
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>
"
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
