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

來源:互聯網
上載者:User

具體到這個例子,我們希望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回呼函數傳遞額外參數,以及實用且重要的上下文參數。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.