jQuery - AJAX load()方法

jQuery load()方法是一種簡(jiǎn)單但功能強(qiáng)大的AJAX方法。

jQuery load()方法

jQuery load()方法從服務(wù)器加載數(shù)據(jù)，并將返回的HTML放入所選元素中。

此方法提供了一種從Web服務(wù)器異步加載數(shù)據(jù)的簡(jiǎn)單方法。

這是load()方法的語法：

$(selector).load(URL, data, callback)

參數(shù)：

• URL-指定您要請(qǐng)求的URL

• data -（可選）指定與請(qǐng)求一起發(fā)送到服務(wù)器的純對(duì)象或字符串

• callback-（可選）指定在load()方法完成后執(zhí)行的回調(diào)函數(shù)

以下示例將ajax_intro.txt文件的內(nèi)容加載到DIV元素中：

$("button").click(function(){
  $("div").load("ajax_intro.txt");
});

以下示例加載ajax_post.html頁面，并發(fā)送一些其他數(shù)據(jù)：

$("button").click(function(){
  let data = {fname:"Seagull", lname:"Anna"};
  $("div").load("ajax_post.php", data);
});

這是PHP文件的外觀（“ ajax_post.html”）：

<?php
    echo "<p>Hello ".$_POST['fname']." ".$_POST['lname'].", How are u doing?</p>";
?>

請(qǐng)求方法：如果將數(shù)據(jù)作為對(duì)象提供，則使用POST方法。否則，假定為GET。

使用回調(diào)加載頁面

可選的callback參數(shù)指定load()方法完成后要運(yùn)行的回調(diào)函數(shù)。

回調(diào)函數(shù)可以具有不同的參數(shù)：

• response  -包含請(qǐng)求中的結(jié)果數(shù)據(jù)

• status -包含請(qǐng)求的狀態(tài)（"success", "notmodified", "error", "timeout", 或 "parsererror"）

• xhr-包含XMLHttpRequest對(duì)象

以下示例將加載ajax_post.html頁面，并發(fā)送一些其他數(shù)據(jù)和警報(bào)狀態(tài)消息：

$("button").click(function(){
  let data = {fname:"Seagull", lname:"Anna"};
  $("div").load("ajax_post.php", data, function(response, status){
    alert(status);
  });
});

以下示例在Ajax請(qǐng)求遇到錯(cuò)誤時(shí)顯示通知：

$("button").click(function(){
  let data = {fname:"Seagull", lname:"Anna"};
  $("#success").load("wrong_file.php", data, function(response, status, xhr){
    if(status == "error"){
      let msg = "Sorry but there was an error: ";
      $("#error").html(msg + xhr.status + " " + xhr.statusText);
    }
  });
});

加載頁面片段

jQuery load()方法還允許我們僅獲取文檔的一部分。

這可以通過在url參數(shù)后面附加一個(gè)空格和jQuery選擇器來簡(jiǎn)單地實(shí)現(xiàn)。

以下示例將文件“ ajax_load.html”中ID為“ table”的元素的內(nèi)容加載到DIV元素中：

$("button").click(function(){
  $("div").load("ajax_load.html #table");
});

jQuery AJAX參考

有關(guān)完整的AJAX方法參考，請(qǐng)?jiān)L問我們的jQuery AJAX參考。