jQuery Tips : 给AJAX回调函数传递额外参数

讨论这个问题基于如下场景:点击页面上某个按钮之后,触发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回调函数传递额外参数,以及实用且重要的上下文参数。

jQuery Tips : 给AJAX回调函数传递额外参数》上有 1 条评论

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>