load 方法载入html文档

load()方法是jQuery 中最为简单和常用的Ajax方法,能载入远程HTML代码并插入到DOM中。

它的结构为:

load(url [,data],[,callback])


load()方法参数解释如表6-1所示:


参数名称                   类型                                 说明
url                        String                                请求HTML页面的URL地址

data(可选)                 Object                                发送至服务器的key/value数据

callback(可选)             Function                               请求完成时的回调函数,无论请求成功或失败


首先构建一个被load()方法加载并追加到页面的HTML文件,名字为test.html,HTML代码如下:

node2:/var/www/html/aa#cat a30.html 
<div class="comment">
  已有评论:
</div>
<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>
</div>

然后新建一个空白页面,在上面添加两个元素:<button>按钮用来触发Ajax事件,

id为"resText"的元素用来显示追加的HTML内容,HTML代码如下:

node2:/var/www/html/aa#cat a31.html 
<input type="button" id="send" value="Ajax获取"/>
<div class="comment">已有评论:</duv>
<div id="resText"></div>

接下来就可以编写jQuery 代码了,等DOM元素加载完毕后,通过单击id为"send"的按钮来调用load()方法，

然后将test.html的内容加载到id为"resText"的元素里

node2:/var/www/html/aa#cat a31.html 
<input type="button" id="send" value="Ajax获取"/>
<div class="comment">已有评论:</duv>
<div id="resText"></div>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="a31.js"></script>

node2:/var/www/html/aa#cat a31.js
$(function(){
  $("#send").click(function(){
      $("#resText").load("test.html");
   });
})



$("#send")  表示获取id为send对应的值