load(url, [data], [callback])
载入远程 HTML 文件代码并插入至 DOM 中。
url:待装入 HTML 网页网址。
data:发送至服务器的 key/value 数据。
callback:载入成功时回调函数。
代码一：
加载整个界面
test.html代码：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div class="comment"> <h6>张三:</h6> <p class="para">沙发.</p> </div> <div class="comment"> <h6>李四:</h6> <p class="para">板凳.</p> </div> <div class="comment"> <h6>王五:</h6> <p class="para">地下室.</p> <p class="para">-1层.</p> <p class="para">-2层.</p> <p class="para">-3层.</p> </div> </body> </html>
html部分：
<body> <input type="button" id="send" value="Ajax获取" /> <div class="comment"> 已有评论： </div> <div id="resText" ></div> </body>
jQuery部分：
<script language="javascript" type="text/javascript"> $(function(){ $("#send").click(function(){ $("#resText").load("test.html"); }) }) </script>
代码二：
加载过滤后界面
<script language="javascript" type="text/javascript"> $(function(){ $("#send").click(function(){ $("#resText").load("test.html .para"); }) }) </script>
将页面中class为para的加载进来。
代码三：
成功后的回调动作
<script language="javascript" type="text/javascript"> $(function(){ $("#send").click(function(){ $("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){ alert( $(this).html() ); //在这里this指向的是当前的DOM对象，即 $("#iptText")[0] alert(responseText); //请求返回的内容 alert(textStatus); //请求状态：success，error alert(XMLHttpRequest); //XMLHttpRequest对象 }); }) }) </script>