jquery ajax&load 方法導致 js效果不顯示或顯示后由于加載后ajax 重新布局頁面導致效果錯誤。
解決思路:需要在ajax get post 或 load 等執行完后再去執行方法就不會由于他們沒執行完導致的最終錯誤。
那么首先看load 方法定義:jQuery ajax - load() 方法
jQuery Ajax 參考手冊
實例
使用 AJAX 請求來改變 p 元素的文本:
$("button").click(function(){
$("p").load('demo_ajax_load.txt');
});
親自試一試
您可以在頁面底部找到更多 TIY 實例
定義和用法
load() 方法通過 AJAX 請求從服務器加載數據,并把返回的數據放置到指定的元素中。
注釋:還存在一個名為 load 的 jQuery 事件方法。調用哪個,取決于參數。
語法
load(url,data,function(response,status,xhr))
參數 描述
url 規定要將請求發送到哪個 URL。
data 可選。規定連同請求發送到服務器的數據。
function(response,status,xhr)
可選。規定當請求完成時運行的函數。
額外的參數:
response - 包含來自請求的結果數據
status - 包含請求的狀態("success", "notmodified", "error", "timeout" 或 "parsererror")
xhr - 包含 XMLHttpRequest 對象
詳細說明
該方法是最簡單的從服務器獲取數據的方法。它幾乎與 $.get(url, data, success) 等價,不同的是它不是全局函數,并且它擁有隱式的回調函數。當偵測到成功的響應時(比如,當 textStatus 為 "success" 或 "notmodified" 時),.load() 將匹配元素的 HTML 內容設置為返回的數據。這意味著該方法的大多數使用會非常簡單:
$("#result").load("ajax/test.html");
如果提供回調函數,則會在執行 post-processing 之后執行該函數:
$("#result").load("ajax/test.html", function() {
alert("Load was performed.");
});
上面的兩個例子中,如果當前文檔不包含 "result" ID,則不會執行 .load() 方法。
如果提供的數據是對象,則使用 POST 方法;否則使用 GET 方法。
加載頁面片段
.load() 方法,與 $.get() 不同,允許我們規定要插入的遠程文檔的某個部分。這一點是通過 url 參數的特殊語法實現的。如果該字符串中包含一個或多個空格,緊接第一個空格的字符串則是決定所加載內容的 jQuery 選擇器。
我們可以修改上面的例子,這樣就可以使用所獲得文檔的某部分:
$("#result").load("ajax/test.html #container");
如果執行該方法,則會取回 ajax/test.html 的內容,不過然后,jQuery 會解析被返回的文檔,來查找帶有容器 ID 的元素。該元素,連同其內容,會被插入帶有結果 ID 的元素中,所取回文檔的其余部分會被丟棄。
jQuery 使用瀏覽器的 .innerHTML 屬性來解析被取回的文檔,并把它插入當前文檔。在此過程中,瀏覽器常會從文檔中過濾掉元素,比如 ,
或 元素。結果是,由 .load() 取回的元素可能與由瀏覽器直接取回的文檔不完全相同。注釋:由于瀏覽器安全方面的限制,大多數 "Ajax" 請求遵守同源策略;請求無法從不同的域、子域或協議成功地取回數據。
更多實例
例子 1
加載 feeds.html 文件內容:
$("#feeds").load("feeds.html");
例子 2
與上面的實例類似,但是以 POST 形式發送附加參數并在成功時顯示信息:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
例子 3
加載文章側邊欄導航部分至一個無序列表:
HTML 代碼:
jQuery Links:
jQuery 代碼:
$("#links").load("/Main_Page #p-Getting-Started li");
發現有個回調方法,那好啊 ,我在回調中寫自己的方法就會在ajax之后執行了。于是乎:$("#feeds").load("feeds.php", function(){
fun();
});
但是有個問題,如果是多個呢? 每個后面都加?而且還要判斷此方法是否被執行過了。(。。。。。。。。。。)
于是乎:找個jquery自帶的判斷所有結束后再去執行就OK了,于是:$("p").ajaxStop(function(){
if (hash && !isGlobalHash) {
$("#MfTit"+hash).trigger("click");
isGlobalHash = true;
}
});
定義:
實例
當所有 AJAX 請求完成時,觸發一個提示框:$("p").ajaxStop(function(){
alert("所有 AJAX 請求已完成");
});
當然 有 stop 就有 start.