具体到这个例子，我们希望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回调函数传递额外参数，以及实用且重要的上下文参数。

　　推荐阅读

　　基于jquery的一行代码轻松实现拖动效果

实现拖动效果. 复制代码 代码如下: $(document).ready( function() { $("#divPanel").easydrag(); } ); Html 代码 复制代码 代码如下: <div id="divPanel" style="width:300px;height:300px;background:white;bor>>>详细阅读

本文标题：jQuery Tips 为AJAX回调函数传递额外参数的方法

地址：http://www.17bianji.com/kaifa2/JS/25125.html

 1/2    1