jQuery如何在回调函数中传递更多参数

261
有没有办法在jQuery中将更多数据传递到回调函数中?
我有两个函数,我想要回调函数例如$.post,能够传入AJAX调用的结果数据以及一些自定义参数。
function clicked() {
    var myDiv = $("#my-div");
    // ERROR: Says data not defined
    $.post("someurl.php",someData,doSomething(data, myDiv),"json"); 
    // ERROR: Would pass in myDiv as curData (wrong)
    $.post("someurl.php",someData,doSomething(data, myDiv),"json"); 
}

function doSomething(curData, curDiv) {

}

我希望能够将自己的参数传递给回调函数,同时还要包括从AJAX调用返回的结果。


14
值得一提的是,自 jQuery 1.4 版本以来,jQuery.ajax() 函数就已经增加了上下文设置(http://jquery14.com/day-01/jquery-14)。在这里可以查看它的使用示例:https://dev59.com/cm435IYBdhLWcg3w-1Z_#5097214。 - russau
我解决了我的问题,在 AJAX 完成后返回数据,然后再执行某些操作。 - Onaiggac
14个回答

1
$(document).on('click','[action=register]',function(){
    registerSocket(registerJSON(),registerDone,second($(this)));
});

function registerSocket(dataFn,doneFn,second){
                 $.ajax({
                       type:'POST',
                       url: "http://localhost:8080/store/public/register",
                       contentType: "application/json; charset=utf-8",
                       dataType: "json",
                       data:dataFn
                 }).done ([doneFn,second])
                   .fail(function(err){
                            console.log("AJAX failed: " + JSON.stringify(err, null, 2));
                        });
}

function registerDone(data){
    console.log(JSON.stringify(data));
}
function second(element){
    console.log(element);
}

次要方法:

function socketWithParam(url,dataFn,doneFn,param){
  $.ajax({
    type:'POST',
    url:url,
    contentType: "application/json; charset=utf-8",
    headers: { 'Authorization': 'Bearer '+localStorage.getItem('jwt')},
    data:dataFn
    }).done(function(data){
      doneFn(data,param);
    })
    .fail(function(err,status,xhr){
    console.log("AJAX failed: " + JSON.stringify(err, null, 2));
    });
}

$(document).on('click','[order-btn]',function(){
  socketWithParam(url,fakeDataFn(),orderDetailDone,secondParam);
});

function orderDetailDone(data,param){
  -- to do something --
}

1

对于像我这样刚接触JavaScript的新手,
我认为“闭包解决方案”有点过于复杂。

而我发现,使用jQuery可以轻松地向每个ajax回调传递任意数量的参数。

以下是两个更简单的解决方案

第一个解决方案,就像@zeroasterisk上面提到的一样,例如:

var $items = $('.some_class');
$.each($items, function(key, item){
    var url = 'http://request_with_params' + $(item).html();
    $.ajax({
        selfDom     : $(item),
        selfData    : 'here is my self defined data',

        url         : url,
        dataType    : 'json',
        success     : function(data, code, jqXHR){
            // in $.ajax callbacks, 
            // [this] keyword references to the options you gived to $.ajax
            // if you had not specified the context of $.ajax callbacks.
            // see http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings context
            var $item = this.selfDom;
            var selfdata = this.selfData;
            $item.html( selfdata );
            ...
        } 
    });
});

第二个是,通过将自定义数据添加到整个ajax请求响应周期中存在的XHR对象中来传递自定义数据。
var $items = $('.some_class');
$.each($items, function(key, item){
    var url = 'http://request_with_params' + $(item).html();
    $.ajax({
        url         : url,
        dataType    : 'json',
        beforeSend  : function(XHR) {
            // 为了便于回调,把当前的 jquery对象集存入本次 XHR
            XHR.selfDom = $(item);
            XHR.selfData = 'here is my self defined data';
        },
        success     : function(data, code, jqXHR){
            // jqXHR is a superset of the browser's native XHR object
            var $item = jqXHR.selfDom;
            var selfdata = jqXHR.selfData;
            $item.html( selfdata );
            ...
        } 
    });
});

正如您所看到的,这两种解决方案都有一个缺点:每次都需要编写比仅编写以下代码多一点的代码:
$.get/post (url, data, successHandler);

了解更多有关 $.ajax 的内容:http://api.jquery.com/jquery.ajax/


0
作为b01的答案的补充,$.proxy的第二个参数通常用于保留this引用。传递给$.proxy的其他参数将部分应用于函数,预先填充数据。请注意,$.post传递给回调的任何参数都将在最后应用,因此doSomething应该在其参数列表的末尾具有这些参数:
function clicked() {
    var myDiv = $("#my-div");
    var callback = $.proxy(doSomething, this, myDiv);
    $.post("someurl.php",someData,callback,"json"); 
}

function doSomething(curDiv, curData) {
    //"this" still refers to the same "this" as clicked()
    var serverResponse = curData;
}

这种方法还允许将多个参数绑定到回调函数:

function clicked() {
    var myDiv = $("#my-div");
    var mySpan = $("#my-span");
    var isActive = true;
    var callback = $.proxy(doSomething, this, myDiv, mySpan, isActive);
    $.post("someurl.php",someData,callback,"json"); 
}

function doSomething(curDiv, curSpan, curIsActive, curData) {
    //"this" still refers to the same "this" as clicked()
    var serverResponse = curData;
}

0

实际上,你的代码没有起作用是因为当你写:

$.post("someurl.php",someData,doSomething(data, myDiv),"json"); 

你应该将一个函数引用作为第三个参数,而不是一个函数调用


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接