jQuery load() 方法實現加載遠程數據

時間 2019-11-11

原文原文鏈接

jQuery load() 方法是簡單但強大的 AJAX 方法。load() 方法從服務器加載數據，並把返回的數據放入被選元素中。html

語法：
$(selector).load(URL,data,callback);必需的 URL 參數規定您但願加載的 URL。可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。可選的 callback 參數是 load() 方法完成後所執行的函數名稱。jquery

這是示例文件（"demo_test.txt"）的內容：ajax

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
下面的這句話會把文件 "demo_test.txt" 的內容加載到指定的 <div> 元素中：api

$("#div1").load("demo_test.txt");服務器

也能夠把 jQuery 選擇器添加到 URL 參數。函數

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的內容，加載到指定的 <div> 元素中：google

$("#div1").load("demo_test.txt #p1");spa

可選的 callback 參數規定當 load() 方法完成後所要容許的回調函數。回調函數能夠設置不一樣的參數：htm

•responseTxt - 包含調用成功時的結果內容
•statusTXT - 包含調用的狀態
•xhr - 包含 XMLHttpRequest 對象
下面的例子會在 load() 方法完成後顯示一個提示框。若是 load() 方法已成功，則顯示「外部內容加載成功！」，而若是失敗，則顯示錯誤消息：對象

完整的例子

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
    $("#div1").load("/example/jquery/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部內容加載成功！");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
});
});
</script>
</head>
<body>