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 相关文章推荐
了解一点js的Eval函数
Jul 26 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
学习jQuey中的return false
Dec 18 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 Javascript
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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
网上应用的一个不错common.js脚本
2007/08/08 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
python实现TF-IDF算法解析
2018/01/02 Python
python中的二维列表实例详解
2018/06/19 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
会计学专业学生的求职信范文
2014/01/27 职场文书
中药专业自荐信范文
2014/03/18 职场文书
中秋寄语大全
2014/04/11 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
劳动模范获奖感言
2015/07/31 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
总结Python使用过程中的bug
2021/06/18 Python