最近写JS经常会因为向回调函数中传参而头疼,今天总结一下向回调函数中传参的方法,以后的应用中就不用在到处去找了。
首先构建一个需要向回调函数中传入参数的典型应用。在一个页面中产生了一系列的向Ajax Proxy的请求,传入的是一个ID,根据ID返回了不同的内容值,我们需要把这些内容打印在页面上,同时给页面元素赋予ID,这个时候就需要向回调函数中传入ID,以产生带ID的页面元素。
第一种方法就是使用全局变量,能够被函数和回调函数同时访问。这种方法虽然不够优雅,但是确实能够完成任务。
这种方法在传入单个的变量时没什么问题,但是当我们在一个循环的结构中,不断的传入变量到回调函数,这个时候传入的变量会采用最后一次传入的变量值,这就与我们预想的结果有了出入。
第二种办法是使用Closure,这种方法更加优雅一些。通过使用Closure,我们通过匿名函数来重新包装返回的对象,同时将需要传入的参数做为新的属性传给回调函数。
第三种方法假设你需要为你的回调函数使用不同的签名,例如Ajax.Net的专家们允许你在回调中使用额外的参数,如果你想从一个换到另外一个并且保持兼容性的话,就要用到下面的写法:
第四种办法其实就是Closure的一种变体,你不需要显示的声明一个回调函数,而是使用一个匿名函数直接进行你所需要的处理。
如何向回调函数中传参数
总结一下:向回调函数中传入参数的终极办法其实就是利用Closure,这个看来是唯一可行而且比较优雅的方法,下面将Closure的写法列在下面:
var callback = {
success:function(data){
var item = document.createElement("li");
item.id = data.id;
item.innerHTML = "The id is : " + data.id;
item.innerHTML += " The value is : " + data.value;
var parent = document.getElementById("result");
parent.appendChild(item);
},
failure:function(){
alert('failure:');
}
}
xhr = new QueuedHandler();
for(var i=0;i<20;i++){
xhr.request('get','ajaxproxy.php?id='+i,function(data){ //第二种办法:利用Closure
data = eval('(' + data + ')');
data.id = i;
callback.success(data);
});
}
分享到:
相关推荐
$.ajax方法接受一个配置对象,该对象包含了许多可选参数,如URL、请求类型(GET或POST)、数据类型(如JSON、HTML等)以及回调函数等。下面是一个基本的使用示例: ```javascript $.ajax({ url: '服务器接口地址',...
get()方法是从服务器获得数据,其主要参数就是获得后台请求地址,以及负责处理的回调函数: $.get(URL,callback); $(button).click(function(){ $.get(demo_test.php,function(data,status){ alert
然后,创建一个`<script>`标签,将`src`属性设置为服务器的URL,URL中包含一个回调函数名,如`?callback=handleData`。服务器接收到请求后,会返回一段JavaScript代码,形如`handleData({key1: 'value1', key2: '...
4.3.1 向回调函数传递额外的参数 63 4.3.2 在回调中实现闭包 64 4.3.3 链式回调 65 4.4 小结 66 4.5 下一章 66 第5章 在Node.js中处理数据I/O 67 5.1 处理JSON 67 5.1.1 把JSON转换成JavaScript对象 67 5.1.2 把...
该库提供了丰富的事件处理机制,如`onStart`、`onComplete`、`onProgress`和`onError`等,开发者可以通过这些事件回调函数来控制文件上传过程中的行为,比如显示进度条、处理错误信息或更新UI状态。 ### 6. 错误...
如果读取过程中出现错误,则会将错误对象作为第一个参数传递给回调函数;如果没有错误,则传递文件内容。 ```javascript fs.readFile('./data/hello.txt', function (error, data) { if (error) { console.log...
有效的类型(返回的类型的结果值会作为第一个参数传递给success指定的回调函数)有: "xml": 返回一个可以由jQuery处理的XML文档。 "html": 返回文本格式的HTML代码。包括求值后的脚本标记。 "script": 将响应...
9. **success**:请求成功时触发的回调函数,其中参数为服务器返回的数据。 ```javascript success: function(xml) { /* 成功处理 */ }, // 成功处理 ``` ##### 2.2 数据处理 - **DOM操作**:通过jQuery选择器...
当请求成功并返回数据时,`success`回调函数会被调用。在回调函数内,使用`jQuery.each`遍历返回的JSON数据,将每个数据项转换为包含`comNumber`, `comName`, `comModou`, 和 `comBtn`属性的对象,并通过`jqGrid('...
在示例代码中,使用urllib发起请求时,通过new Promise创建一个异步操作,设置好相关的选项和回调函数来处理响应或错误。其中,pfx参数代表证书文件,pass参数为证书密码。 request库同样支持多种HTTP请求,并且和...
4.6.3 回调函数 4.6.4 简单概括 4.7 小结 第5章 DOM操作 5.1 操作属性 5.1.1 非class属性 5.1.2 深入理解$()工厂函数 5.2 插入新元素 5.3 移动元素 5.3.1 标注、编号和链接到上下文 5.3.2 插入脚注 5.4 ...
在zTree的配置中,定义了多个回调函数,这些函数分别处理异步加载前的事件、异步加载成功的事件、加载出错的事件以及节点点击前的事件。通过编写相应的回调函数,可以实现加载前的准备、加载成功的处理逻辑、错误...
为了能在AJAX的回调函数中解析数据,需要将数组编码为JSON格式: ```php echo json_encode($css); ``` 最后,别忘了关闭数据库连接: ```php $conn->close(); ``` 在前端,使用jQuery的AJAX方法发起POST请求到`...
- 不需要手动编写JavaScript回调处理函数,简化了开发过程。 - **代码分离原则**: - Xajax强调将代码和数据分离,采用对象构建的方式,允许开发者通过扩展XajaxResponse类和使用`addScript`方法来自定义功能。 - *...
3. **数据处理回调函数:**`success` 回调函数用于处理返回的数据。它接收返回的数据作为参数,允许我们直接操作这些数据。 #### 后台数据的解析 1. **实体对象解析:**如果后台返回的是单个实体对象,直接使用...
在前端,当Ajax请求成功返回后,会进入success回调函数。在这个函数中,使用eval函数将返回的字符串转换为JavaScript对象(此处存在安全风险,因为eval函数会执行字符串内的任意JavaScript代码,实际开发中应避免...
当`XMLHttpRequest`对象的状态改变时会触发`onreadystatechange`事件,此时可以执行回调函数。 4. **发送请求**: ```javascript xhr.send(null); ``` 使用`send`方法发送请求。如果是GET请求,则参数为空或...
在HTTP服务器的回调函数中,我们创建了子进程并将其输出连接到了HTTP响应对象。通过调用child.stdout.pipe(res),我们可以将子进程的标准输出流直接传输到响应体中。这意味着每当有新的HTTP请求被发出,我们的Node....
`url`定义了Action的地址,`data`定义了发送的数据(此处是用户名),`type`定义请求类型为POST,`dataType`指定服务器返回数据的类型为text,`success`则是请求成功后的回调函数。 在Struts2的Action中,`...