您好,欢迎访问一九零五行业门户网

jQuery Tips 为AJAX回调函数传递额外参数的方法_jquery

具体到这个例子,我们希望button1和button2点击之后,用ajax的方式取example.html的内容,然后动态更新页面的id=callbackdemo3的div
html如下:
复制代码 代码如下:
ajax load1
ajax load2
clear
第一种做法:
适用于最简单的情况,也是比较直观的做法,就是在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,那么如何做呢?
复制代码 代码如下:
ajax load3
clear
当然使用#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回调函数传递额外参数,以及实用且重要的上下文参数。
其它类似信息

推荐信息