最近網站做一些改動,需要引用另一個網站的頁面,於是用到了jQuery框加中的load方法。挺方便的。
load(url, [data], [callback])手冊上的說明很直接明瞭:
載入遠程 HTML 文件代碼並插入至 DOM 中。默認使用 GET 方式 – 傳遞附加參數時自動轉換爲 POST 方式。jQuery 1.2 中,可以指定選擇符,來篩選載入的 HTML 文檔,DOM 中將僅插入篩選出的 HTML 代碼。語法形如 “url #some >selector”。
不過因爲它傳輸數據時是用utf-8編碼的,所以當調用頁面編碼不是utf-8的時候,就會出現亂碼,而且url後邊的篩選器只能是以id開始,如果篩選的內容沒有定id的話是很讓人抓狂的,希望在以後的版本里會支持更多的篩選器。
加載頁面全部內容:
$("#html").load("ajax_load.html");
加載頁面部分內容:
$("#html").load("ajax_load.html #left");
加載頁面全部內容,以POST形式發送附加參數,並在成功加載後給出提示:
$("#html").load("ajax_load.html", {"sort":"desc"}, function(){
alert("ajax_load.html load success!");
});
jQuery提供一個防止ajax使用緩存的方法:
<script type="text/javascript" language="javascript">
$.ajaxSetup ({
cache: false //close AJAX cache
});
</script>
這個方法在每次load頁面的時候都要執行一次 否則只會再第一次時候有效 其他load 還會讀取緩存頁面。
*********************************************************************************
注意:
在所指定的標籤沒有加載完成時,load方法並不會執行:
如:頁面中<div class="main">標籤是load方法刷新的內容前提是,html頁面已經加載完成<div class="main">;才能刷新這個div中的內容;
使用jQuery(document).ready(function()方法可以解決,即頁面內容全部加載後,再加載load的內容,如:
jQuery(document).ready(function(){
$("#main").load("ajax_load.html");
}