jQuery Tips 為AJAX回呼函數傳遞額外參數的方法

具體到這個例子，我們希望button1和button2點擊之後，用AJAX的方式取example.html的內容，然後動態更新頁面的id=callbackdemo3的div
HTML如下： 複製代碼 代碼如下:<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>

第一種做法：
適用於最簡單的情況，也是比較直觀的做法，就是在ajax回呼函數中，使用jQuery的id選取器$(“#callbackdemo3″)得到id為callbackdemo3的div後更新其HTML內容 複製代碼 代碼如下:$("#callbackdemo1>#button1").click(
function load(){
$.get("example.html",{ 'param[]': ["var1", "var2"] },
function f1(data, textStatus, XMLHttpRequest)
{
$("#callbackdemo3").html(data);
}
);
}
);

第二種做法：
定義好一個接受額外參數的回呼函數，然後在預設回呼函數的內容調用這個預先定義好的回呼函數
這樣就能達到傳遞額外參數的目的了，較之第一種方法，此方法能比較方便的利用各個回呼函數的上下文。 複製代碼 代碼如下: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);
}
);
}
);

對於額外參數的重要性，不妨看一個稍微複雜一點點的HTML情況，我們希望更新button3下面的那個div的HTML，這個div沒有id，那麼如何做呢？ 複製代碼 代碼如下:<div id="callback_complexdemo">
<button id="button3">ajax load3</button><br/>
<button onclick="$('div',$(this).closest('div')).html('');">clear</button><br/>
<div></div>
</div>

當然使用#callback_complexdemo>div也是可以的，但是如果是更加複雜的HTML頁面呢？如果沒有id=callback_complexdemo呢？嵌套很深呢？
這種情況下，我們就需要有效利用上下文參數這個特性了。
在click的事件處理函數load()中，我們可以方便的獲得當前元素的位置var whereAmI = $(this);
這個whereAmI是個jQuery對象，然後在AJAX回呼函數f3中，我們利用whereAmI即被點中的這個button想辦法去獲得想要的div
這一行代碼新手有的人看不懂：$('div',$(whereAmI).closest('div'))
首先$closest_parent_div = $(whereAmI).closest('div')即查詢獲得whereAmI最近的父div對象
然後$('div',$closest_parent_div) 即在最近的父div對象這個上下文中，尋找內部的div對象 複製代碼 代碼如下:$("#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);
}
);
}
);

希望通過這個小例子，能讓大家學會如何給AJAX回呼函數傳遞額外參數，以及實用且重要的上下文參數。