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


Posted in Javascript onDecember 28, 2010

具体到这个例子,我们希望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回调函数传递额外参数,以及实用且重要的上下文参数。
Javascript 相关文章推荐
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
关于JS中prototype的理解
Sep 07 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
JavaScript去掉空格的方法集合
Dec 28 #Javascript
js常用排序实现代码
Dec 28 #Javascript
深入理解Javascript闭包 新手版
Dec 28 #Javascript
prettify 代码高亮着色器google出品
Dec 28 #Javascript
Pro JavaScript Techniques学习笔记
Dec 28 #Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 #Javascript
JavaScript动态调整TextArea高度的代码
Dec 28 #Javascript
You might like
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
xml和web特殊字符
2009/04/28 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Python内置函数reversed()用法分析
2018/03/20 Python
Django添加feeds功能的示例
2018/08/07 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
python如何将图片转换素描画
2020/09/08 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
自学考试自我鉴定范文
2013/09/26 职场文书
银行开业庆典方案
2014/02/06 职场文书
环境工程专业自荐信
2014/03/03 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书