252 votos

JQuery pasar parámetros más en devolución de llamada

¿Hay una forma de transmitir más datos en una función de devolución de llamada en Jquery?

Tengo dos funciones y quiero la devolución de llamada a la $.post , por ejemplo, en tanto los datos resultantes de la llamada de AJAX, así como unos 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 ser capaz de pasar en mis propios parámetros para una devolución de llamada, así como el resultado devuelto desde la llamada AJAX.

¡ Gracias!

338voto

bradhouse Puntos 3720

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

No he usado el .post función en jQuery, pero un rápido análisis de la documentación sugiere la llamada de vuelta, debe ser un puntero a la función de la aceptación de las siguientes:

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 la invocación es un puntero a función.

Porque extraStuff que se pasa como argumento a doSomething está dentro de alcance de la doSomething función.

Cuando extraStuff se hace referencia en el devueltos anónimo interior de la función de doSomething está obligado por el cierre hacia el exterior de la función extraStuff argumento. Esto es cierto incluso después de doSomething ha regresado.

Yo no he probado los de arriba, pero he escrito muy similares en las últimas 24 horas y funciona tal como la he descrito.

Por supuesto, puede pasar varias variables en lugar de un único " extraStuff' objeto dependiendo de sus preferencias personales/normas de codificación.

82voto

Vincent Robert Puntos 16530

Cuando se utiliza doSomething(data, myDiv), en realidad se llame a la función y no hacer una referencia a él.

Se puede pasar el doStomething función directamente, pero usted debe asegurarse de que tiene la firma correcta.

Si quieres mantener algo de la manera que es, usted puede ajustar su llamamiento 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 de la función anónima código, se puede utilizar las variables definidas en el ámbito envolvente. Esta es la manera en Javascript alcance de las obras.

51voto

zeroasterisk Puntos 801

Es realmente más fácil de lo que todo el mundo es lo que es el sonido... en especial si utiliza el $.ajax({}) base de sintaxis frente a una de las funciones auxiliares.

Acaba de pasar en la key: value par como lo haría con cualquier objeto, cuando el programa de instalación de su petición ajax... (porque $(this) no ha cambiado el contexto, sin embargo, es todavía el detonante de la llamada de enlace de arriba)

<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 la configuración del var, es que el var es global y, como tal, overwritable... si tienes 2 cosas que pueden desencadenar las llamadas ajax, en teoría podría desencadenar más rápido que la llamada ajax responde, y usted tendría el valor para la segunda convocatoria, se pasa a la primera. El uso de este método, por encima, eso no iba a suceder (y es bastante simple de usar demasiado).

20voto

b01 Puntos 1528

En la actualidad hay una otra respuesta que es más limpio y tomado de otra respuesta de desbordamiento de pila:

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 la respuesta original: jQuery cómo?? pasar parámetros adicionales a la devolución de llamada de éxito llamada $.ajax?

8voto

Rohan Almeida Puntos 134

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

}

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X