jQuery pasa más parámetros a la devolución de llamada

¿Hay alguna manera de pasar más datos a una función de devolución de llamada en jQuery?

Tengo dos funciones y quiero que la devolución de llamada a $.post, por ejemplo, pase los datos resultantes de la llamada AJAX, así como algunos argumentos personalizados

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) {

}

Quiero poder pasar mis propios parámetros a una devolución de llamada, así como el resultado devuelto por la llamada AJAX.

La solución es la unión de variables a través del cierre.

Como un ejemplo más básico, aquí hay una función de ejemplo que recibe y llama a una función de devolución de llamada, así como una función de devolución de llamada de ejemplo:

function callbackReceiver(callback) {
    callback("Hello World");
}

function callback(value1, value2) {
    console.log(value1, value2);
}

Esto llama a la devolución de llamada y proporciona un único argumento. Ahora desea proporcionar un argumento adicional, de modo que cierre la devolución de llamada.

callbackReceiver(callback);     // "Hello World", undefined
callbackReceiver(function(value) {
    callback(value, "Foo Bar"); // "Hello World", "Foo Bar"
});

O, más simplemente, usando las funciones de flecha ES6 :

callbackReceiver(value => callback(value, "Foo Bar")); // "Hello World", "Foo Bar"

En cuanto a su ejemplo específico, no he usado la .postfunción en jQuery, pero un análisis rápido de la documentación sugiere que la devolución de llamada debería ser un puntero de función con la siguiente firma:

function callBack(data, textStatus, jqXHR) {};

Por lo tanto, creo que la solución es la siguiente:

var doSomething = function(extraStuff) {
    return function(data, textStatus, jqXHR) {
        // do something with extraStuff
    };
};

var clicked = function() {
    var extraStuff = {
        myParam1: 'foo',
        myParam2: 'bar'
    }; // an object / whatever extra params you wish to pass.

    $.post("someurl.php", someData, doSomething(extraStuff), "json");
};

¿Qué está pasando?

En la última línea, doSomething(extraStuff)se invoca y el resultado de esa invocación es un puntero de función .

Porque extraStuffse pasa como un argumento doSomethingestá dentro del alcance de la doSomethingfunción.

Cuando extraStuffse hace referencia en la función interna anónima devuelta doSomething, está vinculada por el cierre al extraStuffargumento de la función externa . Esto es cierto incluso después de que doSomethinghaya regresado.

No he probado lo anterior, pero he escrito un código muy similar en las últimas 24 horas y funciona como lo describí.

Por supuesto, puede pasar múltiples variables en lugar de un solo objeto 'extraStuff' dependiendo de sus preferencias personales / estándares de codificación.

Cuando se usa doSomething(data, myDiv), realmente llama a la función y no hace referencia a ella.

Puede pasar la doStomethingfunción directamente, pero debe asegurarse de que tenga la firma correcta.

Si desea mantener doSomething como está, puede ajustar su llamada en una función anónima.

function clicked() {
    var myDiv = $("#my-div");
    $.post("someurl.php",someData, function(data){ 
      doSomething(data, myDiv)
    },"json"); 
}

function doSomething(curData, curDiv) {
    ...
}

Dentro del código de función anónimo, puede usar las variables definidas en el alcance adjunto. Esta es la forma en que funciona el alcance de Javascript.

En realidad, es más fácil que todo el mundo lo hace sonar ... especialmente si usa la $.ajax({})sintaxis base frente a una de las funciones auxiliares.

Simplemente pase el key: valuepar como lo haría en cualquier objeto, cuando configure su solicitud ajax ... (porque $(this)todavía no ha cambiado el contexto, sigue siendo el desencadenante de la llamada de enlace anterior)

<script type="text/javascript">
$(".qty input").bind("keypress change", function() {
    $.ajax({
        url: "/order_items/change/"+$(this).attr("data-order-item-id")+"/qty:"+$(this).val()+"/returnas.json",
        type: "POST",
        dataType: "json",
        qty_input: $(this),
        anything_else_i_want_to_pass_in: "foo",
        success: function(json_data, textStatus, jqXHR) {
            /* here is the input, which triggered this AJAX request */
            console.log(this.qty_input);
            /* here is any other parameter you set when initializing the ajax method */
            console.log(this.anything_else_i_want_to_pass_in);
        }
    });
});
</script>

Una de las razones por las que esto es mejor que configurar var es que var es global y, como tal, sobrescribible ... si tiene 2 cosas que pueden activar llamadas ajax, en teoría podría activarlas más rápido de lo que responde la llamada ajax, y tendrías el valor para la segunda llamada pasada a la primera. Usando este método, arriba, eso no sucedería (y es bastante simple de usar también).

En el mundo de hoy hay otra respuesta que es más limpia, y tomada de otra respuesta de Stack Overflow:

function clicked()
{
    var myDiv = $( "#my-div" );

    $.post( "someurl.php", {"someData": someData}, $.proxy(doSomething, myDiv), "json" );
}

function doSomething( data )
{
    // this will be equal to myDiv now. Thanks to jQuery.proxy().
    var $myDiv = this;

    // doing stuff.
    ...
}

Aquí está la pregunta y respuesta original: jQuery ¿CÓMO? pasar parámetros adicionales a la devolución de llamada exitosa para la llamada $ .ajax?

También puedes probar algo como lo siguiente:

function clicked() {

    var myDiv = $("#my-div");

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

function doSomething(curData, curDiv) {

}

Puede usar un cierre de JavaScript:

function wrapper( var1, var2,....) // put here your variables
{
  return function( data, status)
  {
     //Handle here results of call
  }
};

y cuando puedes hacer:

$.post("someurl.php",data,wrapper(var1, var2, etc...),"html");

He cometido un error en la última publicación. Este es un ejemplo práctico de cómo pasar argumentos adicionales en la función de devolución de llamada:

function custom_func(p1,p2) {
    $.post(AJAX_FILE_PATH,{op:'dosomething',p1:p1},
        function(data){
            return function(){
                alert(data);
                alert(p2);
            }(data,p2)
        }
    );
    return false;
}

¡Vamos simples! :)

$.ajax({
    url: myUrl,
    context: $this, // $this == Current $element
    success: function(data) {
        $.proxy(publicMethods.update, this)(data); // this == Current $element
    }
});

Una solución más general para enviar solicitudes asincrónicas utilizando la .ajax()API jQuery y los cierres para pasar parámetros adicionales a la función de devolución de llamada:

function sendRequest(method, url, content, callback) {
    // additional data for the callback
    var request = {
        method: method,
        url: url
    };

    $.ajax({
        type: method,
        url: url,
        data: content
     }).done(function(data, status, xhr) {
        if (callback) callback(xhr.status, data, request);
     }).fail(function(xhr, status) {
        if (callback) callback(xhr.status, xhr.response, request);
     });
};

Para mí y para otros novatos que acaban de contactar con Javascript,
creo que elCloseure Solution es un poco confuso.

Si bien descubrí eso, puede pasar fácilmente todos los parámetros que desee a cada devolución de llamada ajax utilizando jquery.

Aquí hay dos soluciones más fáciles .

El primero, que @zeroasterisk ha mencionado anteriormente, ejemplo:

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 );
            ...
        } 
    });
});

En segundo lugar, pase los datos autodefinidos agregándolos al XHR object que existe en toda la vida útil de ajax-request-response.

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 );
            ...
        } 
    });
});

Como puede ver, estas dos soluciones tienen un inconveniente que: necesita escribir un poco más de código cada vez que simplemente escribir:

$.get/post (url, data, successHandler);

Lea más sobre $ .ajax: http://api.jquery.com/jquery.ajax/

Si alguien todavía viene aquí, esta es mi opinión:

$('.selector').click(myCallbackFunction.bind({var1: 'hello', var2: 'world'}));

function myCallbackFunction(event) {
    var passedArg1 = this.var1,
        passedArg2 = this.var2
}

Lo que sucede aquí, después de vincularse a la función de devolución de llamada, estará disponible dentro de la función como this .

Esta idea proviene de cómo React usa la bindfuncionalidad.

$(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);
}

Forma secundaria:

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

en realidad, su código no funciona porque cuando escribe:

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

coloca una llamada de función como el tercer parámetro en lugar de una referencia de función .

Como una adición a la respuesta de b01 , el segundo argumento de $.proxyse usa a menudo para preservar la thisreferencia. Los argumentos adicionales pasados ​​a $.proxyse aplican parcialmente a la función, llenándola previamente con datos. Tenga en cuenta que cualquier argumento que $.postpase a la devolución de llamada se aplicará al final, por lo que doSomethingdebería tenerlos al final de su lista de argumentos:

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;
}

Este enfoque también permite que varios argumentos se unan a la devolución de llamada:

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;
}