jQuery ajax删除

最新推荐文章于 2021-11-04 20:00:20 发布

转载最新推荐文章于 2021-11-04 20:00:20 发布 · 423 阅读

文章标签：

#jquery #ajax #class #function #div #scroll

本文介绍了一个使用 jQuery 和 AJAX 实现动态删除元素的示例。通过点击“删除”链接，可以向服务器发送 POST 请求，并根据服务器响应动态更新页面内容。

<!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" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> 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> <mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <div> <h1>jQuery ajax删除</h1> <div class="list"> <a id="del-1" class="del" href="#" mce_href="#">删除</a> <b>jQuery学习,jQuery框架学习</b> </div> <div class="list"> <a id="del-2" class="del" href="#" mce_href="#">删除</a> <b>jQuery学习,jQuery框架学习</b> </div> <div class="list"> <a id="del-3" class="del" href="#" mce_href="#">删除</a> <b>jQuery学习,jQuery框架学习</b> </div> <div class="list"> <a id="del-4" class="del" href="#" mce_href="#">删除</a> <b>jQuery学习,jQuery框架学习</b> </div> <div class="list"> <a id="del-5" class="del" href="#" mce_href="#">删除</a> <b>jQuery学习,jQuery框架学习</b> </div> </div> </body> </html>