手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery Tips 为AJAX回调函数传递额外参数的方法
jQuery Tips 为AJAX回调函数传递额外参数的方法
摘要:具体到这个例子,我们希望button1和button2点击之后,用AJAX的方式取example.html的内容,然后动态更新页面的id=c...

具体到这个例子,我们希望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"></div>

<button>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>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回调函数传递额外参数的方法】相关文章:

jQuery仿gmail实现fixed布局的方法

jQuery判断一个元素是否可见的方法

js比较日期大小的方法

jquery实现图片左右切换的方法

jQuery实现给页面换肤的方法

jQuery实现延迟跳转的方法

jQuery取消ajax请求的方法

JavaScript实现表格点击排序的方法

JavaScript中指定函数名称的相关方法

JavaScript获得url查询参数的方法

精品推荐
分类导航