jquery load事件(callback/data)使用方法及注意事項

如果綁定給window對象，則會在所有內容加載后觸發(fā)，包括窗口，框架，對象和圖像。如果綁定在元素上，則當元素的內容加載完畢后觸發(fā)。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網站設計、做網站、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯(lián)網時代的蓋州網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

注意:只有當在這個元素完全加載完之前綁定load的處理函數(shù),才會在他加載完后觸發(fā)。如果之后再綁定就永遠不會觸發(fā)了。所以不要在$(document).ready()里綁定load事件，因為jQuery會在所有DOM加載完成后再綁定load事件。因此，使用load方法時盡量把load方法寫在頁面頂部。

調用load方法的完整格式是：load(

url,

[data],

[callback]

),

其中:

?url：是指要導入文件的地址。

?data：可選參數(shù)；因為Load不僅僅可以導入靜態(tài)的html文件，還可以導入動態(tài)腳本，例如PHP文件，所以要導入的是動態(tài)文件時，我們可以把要傳遞的參數(shù)放在這里。

?callback：可選參數(shù)；是指調用load方法并得到服務器響應后，再執(zhí)行的另外一個函數(shù)。

一：如何使用data

1.加載一個php文件，該php文件不含傳遞參數(shù)$("#myID").load("test.php");

//在id為#myID的元素里導入test.php運行后的結果2.

加載一個php文件，該php文件含有一個傳遞參數(shù)

$("#myID").load("test.php",{"name"

:

"Adam"});

//導入的php文件含有一個傳遞參數(shù)，類似于：test.php?name=Adam3.

加載一個php文件，該php文件含有多個傳遞參數(shù)。注：參數(shù)間用逗號分隔

$("#myID").load("test.php",{"name"

:

"Adam"

，"site":"61dh.com"});

//導入的php文件含有一個傳遞參數(shù)，類似于：test.php?name=Adamsite=61dh.com4.

加載一個php文件，該php文件以數(shù)組作為傳遞參數(shù)

$("#myID").load("test.php",{'myinfo[]',

["Adam",

"61dh.com"]});

//導入的php文件含有一個數(shù)組傳遞參數(shù)。注意：使用load，這些參數(shù)是以POST的方式傳遞的，因此在test.php里，不能用GET來獲取參數(shù)。

二：如何使用callback

比如我們要在load方法得到服務器響應后，慢慢地顯示加載的內容，就可以使用callback函數(shù)。代碼如下：

復制代碼

代碼如下:

$("#go").click(function(){

$("#myID").load("welcome.php",

{"lname"

:

"Cai",

"fname"

:

"Adam",

function(){

$("#myID").fadeIn('slow');}

);

});

備注：

在load的url里加上空格后面就可以跟選擇器了。

例如：

復制代碼

代碼如下:

$("body").load("test.html

#a");

頁面用jquery的load()方法加載新頁面之后怎么返回上一頁

原頁面A.html：

html

headtitle/title/head

body

div id="container"/div

/body/html

被load的頁面B.html：

html

headtitle/title/head

style.page-li {font-size:12px;color:blue}/style

body

div id="page"

ol class="page-li"

li234123/lili341234/lili41234/lili412de34/li

/ol

/div

/body/html

在原頁面A.html中加載調用的jquery.load()，然后再在原頁面對 page-li 的樣式重新定義下就可以了：

添加了load(),css的原頁面：

html

headtitle/title/head

style.page-li {font-size:12px;color:green}/style

body

div id="container"/div

script type="text/javascript"

$(function(){

$("#container").load("B.html #page",null,function(){alert("加載成功")});

});

/script

/body/html

jQuery load方法

以?POST?形式發(fā)送附加參數(shù)并在成功時顯示信息。

$usr?=?$('#usr1').prop('value');

$pwd?=?$('#pwd1').prop('value');

$("#feeds").load("test1.php",?{usr:?$usr,?pwd:?$pwd},?function(){

alert("username?and?password?send?!");

});

jquery.load 和 append 同時使用上的區(qū)別

jQuery 事件 - load() 方法

當指定的元素（及子元素）已加載時，會發(fā)生 load() 事件。

實例

當圖像加載時，改變 div 元素的文本：

$("img").load(function(){

$("div").text("Image loaded");

});

append() 方法

append() 方法在被選元素的結尾（仍然在內部）插入指定內容。

提示：append() 和 appendTo() 方法執(zhí)行的任務相同。不同之處在于：內容的位置和選擇器。

實例

在每個 p 元素結尾插入內容：

$("button").click(function(){

$("p").append(" bHello world!/b");

});

應用實例

//更多文章

var url='/ajaxArchive.php?page=1';

$("#archivePlaceHold").load(url);

jQuery.load()只能替換掉元素中的內容。

jQuery.load()不能同時使用append，需要使用 jQuery.get()實現(xiàn)

var url='/ajaxArchive.php?page=1';

$.get(url, function(data){

$(data).appendTo("#archivePlaceHold");

});

jquery的load和get的區(qū)別

jquery的load把返回的數(shù)據(jù)放到指定的元素中，不是全局函數(shù)；

jquery的get把返回的數(shù)據(jù)交給用戶處理，是全局函數(shù)。

load和get同樣是jquery的ajax函數(shù)，load的實現(xiàn)，幾乎等于get之后再設置網頁元素，在ajax獲取機制上沒有區(qū)別，但要注意的是，load方法另一個和get的重要區(qū)別，就是load允許指定要插入的遠程文檔的某個部分，比如：

$("#result").load("test.html #page2");

load是最簡單的ajax加載局部網頁的方法，但有局限性（只能替換元素內容），get也是jquery中比較簡單的方法，兩者的安全級別較低。如果有傳送密碼和其它重要數(shù)據(jù)信息，推薦使用post方法。

新聞名稱：jquery的load方法,jquery load加載頁面
網頁鏈接：http://sd-ha.com/article18/dsiphgp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站維護、企業(yè)網站制作、靜態(tài)網站、定制開發(fā)、搜索引擎優(yōu)化、網站收錄

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)