`
kaidi0314
  • 浏览: 86164 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js回调函数参数传送

    博客分类:
  • js
js 
阅读更多
最近写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);
        });

    }
分享到:
评论

相关推荐

    一个完整的jquery+ajax传送请求的实例

    $.ajax方法接受一个配置对象,该对象包含了许多可选参数,如URL、请求类型(GET或POST)、数据类型(如JSON、HTML等)以及回调函数等。下面是一个基本的使用示例: ```javascript $.ajax({ url: '服务器接口地址',...

    利用js实现前后台传送Json的示例代码

    get()方法是从服务器获得数据,其主要参数就是获得后台请求地址,以及负责处理的回调函数: $.get(URL,callback); $(button).click(function(){ $.get(demo_test.php,function(data,status){ alert

    html通过 ajax jsonp跨域请求接收和传送数据

    然后,创建一个`&lt;script&gt;`标签,将`src`属性设置为服务器的URL,URL中包含一个回调函数名,如`?callback=handleData`。服务器接收到请求后,会返回一段JavaScript代码,形如`handleData({key1: 'value1', key2: '...

    Node.js MongoDB AngularJSWeb开发中文版.part1

    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 把...

    ajaxfileupload.js

    该库提供了丰富的事件处理机制,如`onStart`、`onComplete`、`onProgress`和`onError`等,开发者可以通过这些事件回调函数来控制文件上传过程中的行为,比如显示进度条、处理错误信息或更新UI状态。 ### 6. 错误...

    node初学笔记,含express和mongoose

    如果读取过程中出现错误,则会将错误对象作为第一个参数传递给回调函数;如果没有错误,则传递文件内容。 ```javascript fs.readFile('./data/hello.txt', function (error, data) { if (error) { console.log...

    jquery-1.1.3 效率提高800%

    有效的类型(返回的类型的结果值会作为第一个参数传递给success指定的回调函数)有: "xml": 返回一个可以由jQuery处理的XML文档。 "html": 返回文本格式的HTML代码。包括求值后的脚本标记。 "script": 将响应...

    ajax经典怎样传输数据

    9. **success**:请求成功时触发的回调函数,其中参数为服务器返回的数据。 ```javascript success: function(xml) { /* 成功处理 */ }, // 成功处理 ``` ##### 2.2 数据处理 - **DOM操作**:通过jQuery选择器...

    金蝶WAF2平台问题

    当请求成功并返回数据时,`success`回调函数会被调用。在回调函数内,使用`jQuery.each`遍历返回的JSON数据,将每个数据项转换为包含`comNumber`, `comName`, `comModou`, 和 `comBtn`属性的对象,并通过`jqGrid('...

    Node.js 数据加密传输浅析

    在示例代码中,使用urllib发起请求时,通过new Promise创建一个异步操作,设置好相关的选项和回调函数来处理响应或错误。其中,pfx参数代表证书文件,pass参数为证书密码。 request库同样支持多种HTTP请求,并且和...

    Jqury基础教程

    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 ...

    jquery zTree异步加载简单实例分享

    在zTree的配置中,定义了多个回调函数,这些函数分别处理异步加载前的事件、异步加载成功的事件、加载出错的事件以及节点点击前的事件。通过编写相应的回调函数,可以实现加载前的准备、加载成功的处理逻辑、错误...

    php从数据库中获取数据用ajax传送到前台的方法

    为了能在AJAX的回调函数中解析数据,需要将数组编码为JSON格式: ```php echo json_encode($css); ``` 最后,别忘了关闭数据库连接: ```php $conn-&gt;close(); ``` 在前端,使用jQuery的AJAX方法发起POST请求到`...

    ajax中文开发文档

    - 不需要手动编写JavaScript回调处理函数,简化了开发过程。 - **代码分离原则**: - Xajax强调将代码和数据分离,采用对象构建的方式,允许开发者通过扩展XajaxResponse类和使用`addScript`方法来自定义功能。 - *...

    Jquery+asp.net后台数据传到前台js进行解析的方法

    3. **数据处理回调函数:**`success` 回调函数用于处理返回的数据。它接收返回的数据作为参数,允许我们直接操作这些数据。 #### 后台数据的解析 1. **实体对象解析:**如果后台返回的是单个实体对象,直接使用...

    js使用ajax传值给后台,后台返回字符串处理方法

    在前端,当Ajax请求成功返回后,会进入success回调函数。在这个函数中,使用eval函数将返回的字符串转换为JavaScript对象(此处存在安全风险,因为eval函数会执行字符串内的任意JavaScript代码,实际开发中应避免...

    ajax_start.pdf

    当`XMLHttpRequest`对象的状态改变时会触发`onreadystatechange`事件,此时可以执行回调函数。 4. **发送请求**: ```javascript xhr.send(null); ``` 使用`send`方法发送请求。如果是GET请求,则参数为空或...

    nodejs中向HTTP响应传送进程的输出

    在HTTP服务器的回调函数中,我们创建了子进程并将其输出连接到了HTTP响应对象。通过调用child.stdout.pipe(res),我们可以将子进程的标准输出流直接传输到响应体中。这意味着每当有新的HTTP请求被发出,我们的Node....

    struts2+jquery组合验证注册用户是否存在

    `url`定义了Action的地址,`data`定义了发送的数据(此处是用户名),`type`定义请求类型为POST,`dataType`指定服务器返回数据的类型为text,`success`则是请求成功后的回调函数。 在Struts2的Action中,`...

Global site tag (gtag.js) - Google Analytics