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對應的值