使用jQuery的load()方法可以加載外部頁面,實現頁面加載的功能。
load()方法的基本語法為:
$(selector).load(url, data, callback);
其中:
selector:需要加載內容的元素選擇器
url:要加載的頁面的URL
data:可選參數,發送到服務器的數據
callback:可選參數,加載完成后的回調函數
示例代碼:
$("#myDiv").load("demo.html"); // 加載demo.html頁面的內容到id為myDiv的元素中
$("#myDiv").load("demo.html #content"); // 加載demo.html頁面中id為content的元素的內容到id為myDiv的元素中
$("#myDiv").load("demo.html", {name: "John", age: 30}, function(response, status, xhr){
if (status == "success") {
console.log("加載成功");
} else if (status == "error") {
console.log("加載失敗");
}
}); // 加載demo.html頁面,并發送{name: "John", age: 30}的數據,加載完成后執行回調函數
注意:
加載的頁面必須在同一個域名下,否則會出現跨域問題。
發送數據時可以使用對象、字符串或函數來設置參數。
回調函數中的response參數包含加載的內容,status參數包含請求狀態(“success"或"error”),xhr參數包含 XMLHttpRequest 對象。
load()方法只能加載靜態內容,不能加載動態生成的內容,如頁面中通過AJAX加載的內容無法被load()方法加載。
如果需要加載動態生成的內容,可以使用jQuery的ajax()方法。