jQuery之load方法

太阳不下山

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>

[jQuery] jQuery之load方法

相关帖子

WordPress怎么获取当前页面URL地址

常用jquery右健禁止命令

HTML/JS/PHP网站底部获取当前年份代码

html+Js获取当前时间代码

nginx启ssi方法，宝塔面板nginx开启ssi

文件对比工具/Beyond Compare

常用HTML网页跳转的几种方法

CSS3荧光灯文字闪烁动画特效

利用html+js触发弹窗事件

利用HTML、CSS和JS制作随机密码生成器

太阳不下山 LV4