jQuery Tips 为AJAX回调函数传递额外参数的方法
更新时间：2010年12月28日 22:07:55 作者：
讨论这个问题基于如下场景：点击页面上某个按钮之后，触发click事件，事件处理函数内部发送一个AJAX请求，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回调函数传递额外参数，以及实用且重要的上下文参数。
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回调函数传递额外参数，以及实用且重要的上下文参数。
相关文章
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
这篇文章主要介绍了easyUi 打开对话框后控件赋值，以及赋值后不显示的问题解决办法，解决方法非常简单，只需要将赋值语句修改下就好，下面小编给大家简单介绍下，需要的朋友参考下2017-01-01
本文主要分享了jquery实现自适应banner焦点图的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了jQuery实现带延迟的二级tab切换下拉列表效果,涉及jquery鼠标事件及页面元素样式动态变换的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
本篇文章主要介绍了解决ajax不能访问本地文件问题（利用js跨域原理），具有一定的参考价值，有兴趣的可以了解一下。2017-01-01
本文给大家总结了10款本站今年比较热门的html5/css3的动画特效，附上演示地址和下载地址，有需要的小伙伴对比着使用。2014-12-12
利用jQuery插件imgAreaSelect实现图片上传裁剪（同步显示图像位置信息）
本篇文章主要对jQuery插件imgAreaSelect实现图片上传裁剪（同步显示图像位置信息）的使用做了简要分析说明。需要的朋友来看下吧，希望对大家有所帮助2016-12-12
这篇文章主要介绍了jQuery选择器基础知识,结合实例分析了jQuery选择器的功能、使用方法与相关操作技巧,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了jQuery获取DOM节点的方法,提供了两种jQuery获取DOM节点的技巧,需要的朋友可以参考下2015-12-12
jQuery的链式操作是如何实现的？为什么要用链式操作？接下来会帮助大家解决这两个问题，感兴趣的朋友可以了解下2013-01-01
这篇文章主要介绍了Jquery实现鼠标移动放大图片功能,实例分析了jQuery操作鼠标与图片的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
最新评论