jQuery Tips 為AJAX回調(diào)函數(shù)傳遞額外參數(shù)的方法

更新時(shí)間：2010年12月28日 22:07:55 作者：

討論這個(gè)問(wèn)題基于如下場(chǎng)景：點(diǎn)擊頁(yè)面上某個(gè)按鈕之后，觸發(fā)click事件，事件處理函數(shù)內(nèi)部發(fā)送一個(gè)AJAX請(qǐng)求，AJAX回調(diào)函數(shù)更新頁(yè)面的某一個(gè)部分。

具體到這個(gè)例子，我們希望button1和button2點(diǎn)擊之后，用AJAX的方式取example.html的內(nèi)容，然后動(dòng)態(tài)更新頁(yè)面的id=callbackdemo3的div
HTML如下：

復(fù)制代碼代碼如下:

 
<div id="callbackdemo1"> 
<button id="button1">ajax load1</button><br/> 
</div> 
<div id="callbackdemo2"> 
<button id="button2">ajax load2</button><br/> 
</div> 
<div id="callbackdemo3" class="log"></div> 
<button onclick="$('.log').html('');">clear</button> 

第一種做法：
適用于最簡(jiǎn)單的情況，也是比較直觀的做法，就是在ajax回調(diào)函數(shù)中，使用jQuery的id選擇器$(“#callbackdemo3″)得到id為callbackdemo3的div后更新其HTML內(nèi)容

復(fù)制代碼代碼如下:

 
$("#callbackdemo1>#button1").click( 
function load(){ 
$.get("example.html",{ 'param[]': ["var1", "var2"] }, 
function f1(data, textStatus, XMLHttpRequest) 
{ 
$("#callbackdemo3").html(data); 
} 
); 
} 
); 

第二種做法：
定義好一個(gè)接受額外參數(shù)的回調(diào)函數(shù)，然后在默認(rèn)回調(diào)函數(shù)的內(nèi)容調(diào)用這個(gè)預(yù)先定義好的回調(diào)函數(shù)
這樣就能達(dá)到傳遞額外參數(shù)的目的了，較之第一種方法，此方法能比較方便的利用各個(gè)回調(diào)函數(shù)的上下文。

復(fù)制代碼代碼如下:

 
function callback_with_extraParam(data,param) 
{ 
param.html(data); 
} 
$("#callbackdemo2>#button2").click( 
function load(){ 
var extraParam = $("#callbackdemo3") 
$.get("example.html",{ 'param[]': ["var1", "var2"] }, 
function f2(data) 
{ 
callback_with_extraParam(data,extraParam); 
} 
); 
} 
); 

對(duì)于額外參數(shù)的重要性，不妨看一個(gè)稍微復(fù)雜一點(diǎn)點(diǎn)的HTML情況，我們希望更新button3下面的那個(gè)div的HTML，這個(gè)div沒(méi)有id，那么如何做呢？

復(fù)制代碼代碼如下:

 
<div id="callback_complexdemo"> 
<button id="button3">ajax load3</button><br/> 
<button onclick="$('div',$(this).closest('div')).html('');">clear</button><br/> 
<div></div> 
</div> 

當(dāng)然使用#callback_complexdemo>div也是可以的，但是如果是更加復(fù)雜的HTML頁(yè)面呢？如果沒(méi)有id=callback_complexdemo呢？嵌套很深呢？
這種情況下，我們就需要有效利用上下文參數(shù)這個(gè)特性了。
在click的事件處理函數(shù)load()中，我們可以方便的獲得當(dāng)前元素的位置var whereAmI = $(this);
這個(gè)whereAmI是個(gè)jQuery對(duì)象，然后在AJAX回調(diào)函數(shù)f3中，我們利用whereAmI即被點(diǎn)中的這個(gè)button想辦法去獲得想要的div
這一行代碼新手有的人看不懂：$('div',$(whereAmI).closest('div'))
首先$closest_parent_div = $(whereAmI).closest('div')即查詢(xún)獲得whereAmI最近的父div對(duì)象
然后$('div',$closest_parent_div) 即在最近的父div對(duì)象這個(gè)上下文中，查找內(nèi)部的div對(duì)象

復(fù)制代碼代碼如下:

 
$("#callback_complexdemo>#button3").click( 
function load(){ 
var whereAmI = $(this); 
$.get("example.html",{ 'param[]': ["var1", "var2"] }, 
function f3(data) 
{ 
console.log(whereAmI); 
$('div',$(whereAmI).closest('div')).html(data); 
} 
); 
} 
); 

希望通過(guò)這個(gè)小例子，能讓大家學(xué)會(huì)如何給AJAX回調(diào)函數(shù)傳遞額外參數(shù)，以及實(shí)用且重要的上下文參數(shù)。

您可能感興趣的文章:

相關(guān)文章

EasyUi 打開(kāi)對(duì)話(huà)框后控件賦值及賦值后不顯示的問(wèn)題解決辦法
這篇文章主要介紹了easyUi 打開(kāi)對(duì)話(huà)框后控件賦值，以及賦值后不顯示的問(wèn)題解決辦法，解決方法非常簡(jiǎn)單，只需要將賦值語(yǔ)句修改下就好，下面小編給大家簡(jiǎn)單介紹下，需要的朋友參考下
2017-01-01
jquery實(shí)現(xiàn)自適應(yīng)banner焦點(diǎn)圖
本文主要分享了jquery實(shí)現(xiàn)自適應(yīng)banner焦點(diǎn)圖的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
jQuery實(shí)現(xiàn)帶延遲的二級(jí)tab切換下拉列表效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶延遲的二級(jí)tab切換下拉列表效果,涉及jquery鼠標(biāo)事件及頁(yè)面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
解決ajax不能訪(fǎng)問(wèn)本地文件問(wèn)題（利用js跨域原理）
本篇文章主要介紹了解決ajax不能訪(fǎng)問(wèn)本地文件問(wèn)題（利用js跨域原理），具有一定的參考價(jià)值，有興趣的可以了解一下。
2017-01-01
2014 HTML5/CSS3熱門(mén)動(dòng)畫(huà)特效TOP10
本文給大家總結(jié)了10款本站今年比較熱門(mén)的html5/css3的動(dòng)畫(huà)特效，附上演示地址和下載地址，有需要的小伙伴對(duì)比著使用。
2014-12-12
利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪（同步顯示圖像位置信息）
本篇文章主要對(duì)jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪（同步顯示圖像位置信息）的使用做了簡(jiǎn)要分析說(shuō)明。需要的朋友來(lái)看下吧，希望對(duì)大家有所幫助
2016-12-12
jQuery選擇器基礎(chǔ)入門(mén)教程
這篇文章主要介紹了jQuery選擇器基礎(chǔ)知識(shí),結(jié)合實(shí)例分析了jQuery選擇器的功能、使用方法與相關(guān)操作技巧,需要的朋友可以參考下
2016-05-05
jQuery獲取DOM節(jié)點(diǎn)實(shí)例分析(2種方式)
這篇文章主要介紹了jQuery獲取DOM節(jié)點(diǎn)的方法,提供了兩種jQuery獲取DOM節(jié)點(diǎn)的技巧,需要的朋友可以參考下
2015-12-12
jQuery的鏈?zhǔn)讲僮魇侨绾螌?shí)現(xiàn)的？為什么要用鏈?zhǔn)讲僮?？接下?lái)會(huì)幫助大家解決這兩個(gè)問(wèn)題，感興趣的朋友可以了解下
2013-01-01