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>





本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/archive/2012/10/09/2716780.html,如需转载请自行联系原作者
相关文章
|
10天前
|
JavaScript CDN
jQuery方法小记
jQuery方法小记
20 0
|
4月前
|
JavaScript
jQuery追加节点方法 和height方法与width方法
jQuery追加节点方法 和height方法与width方法
|
4月前
|
JavaScript 前端开发
调用jQuery的animate()方法无法移动的问题
调用jQuery的animate()方法无法移动的问题
|
4月前
|
JavaScript 前端开发 UED
jQuery 自动刷新页面但不闪烁的实现方法
jQuery 自动刷新页面但不闪烁的实现方法
|
5月前
|
JavaScript 前端开发
jQuery学习(十二)—jQuery中对象的查找方法总结
jQuery学习(十二)—jQuery中对象的查找方法总结
|
5月前
|
JavaScript
jQuery学习(九)—常用的包裹方法
jQuery学习(九)—常用的包裹方法
|
5月前
|
JavaScript
jQuery学习(七)— append方法与appendTo方法
jQuery学习(七)— append方法与appendTo方法
|
5月前
|
JavaScript
jQuery学习(八)—before方法、after方法、insertBefore方法、insertAfter方法
jQuery学习(八)—before方法、after方法、insertBefore方法、insertAfter方法
|
23天前
|
JavaScript Serverless
jquery attr()方法
jquery attr()方法
15 0
|
3天前
|
JavaScript
jquery获取子元素的一些方法
jquery获取子元素的一些方法