jQuery passa mais parâmetros para retorno de chamada

Existe uma maneira de passar mais dados para uma função de retorno de chamada no jQuery?

Eu tenho duas funções e quero que o retorno de chamada para $.post, por exemplo, passe os dados resultantes da chamada AJAX, bem como alguns 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) {

}

Quero poder passar meus próprios parâmetros para um retorno de chamada, bem como o resultado retornado da chamada AJAX.

A solução é a ligação de variáveis ​​através do fechamento.

Como um exemplo mais básico, aqui está um exemplo de função que recebe e chama uma função de retorno de chamada, bem como uma função de retorno de chamada de exemplo:

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

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

Isso chama o retorno de chamada e fornece um único argumento. Agora você deseja fornecer um argumento adicional, para encerrar o retorno de chamada.

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

Ou, mais simplesmente, usando as funções de seta do ES6 :

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

Quanto ao seu exemplo específico, eu não usei a .postfunção no jQuery, mas uma rápida verificação da documentação sugere que a chamada de retorno deve ser um ponteiro de função com a seguinte assinatura:

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

Portanto, acho que a solução é a seguinte:

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

O que está acontecendo?

Na última linha, doSomething(extraStuff)é invocado e o resultado dessa invocação é um ponteiro de função .

Porque extraStuffé passado como argumento para doSomethingele, está dentro do escopo da doSomethingfunção.

Quando extraStuffé referenciado na função interna anônima retornada doSomething, é vinculado pelo fechamento do extraStuffargumento da função externa . Isso é verdade mesmo após o doSomethingretorno.

Não testei o acima, mas escrevi um código muito semelhante nas últimas 24 horas e funciona como descrevi.

É claro que você pode passar várias variáveis ​​em vez de um único objeto 'extraStuff', dependendo de suas preferências pessoais / padrões de codificação.

Ao usar doSomething(data, myDiv), você realmente chama a função e não faz referência a ela.

Você pode passar a doStomethingfunção diretamente, mas deve garantir que ela tenha a assinatura correta.

Se você deseja continuar fazendo algo do jeito que está, pode encerrar sua chamada em uma função anônima.

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

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

Dentro do código de função anônimo, você pode usar as variáveis ​​definidas no escopo em anexo. É assim que o escopo do Javascript funciona.

Na verdade, é mais fácil do que todo mundo está fazendo parecer ... especialmente se você usar a $.ajax({})sintaxe básica versus uma das funções auxiliares.

Basta passar o key: valuepar como faria em qualquer objeto, ao configurar sua solicitação ajax ... (porque $(this)ainda não mudou o contexto, ainda é o gatilho para a ligação acima)

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

Uma das razões pelas quais isso é melhor do que definir o var, é que o var é global e, como tal, substituível ... se você tem duas coisas que podem acionar chamadas ajax, em teoria, você pode acioná-las mais rapidamente do que as chamadas ajax respondem e você teria o valor da segunda chamada passado para a primeira. Usar esse método acima não aconteceria (e é muito simples de usar também).

No mundo de hoje, há uma outra resposta mais limpa e extraída de outra resposta do 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.
    ...
}

Aqui está a pergunta e resposta originais: jQuery HOW TO ?? passar parâmetros adicionais ao retorno de chamada bem-sucedido para a chamada $ .ajax?

Você também pode tentar algo como o seguinte:

function clicked() {

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

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

function doSomething(curData, curDiv) {

}

Você pode usar um fechamento do JavaScript:

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

e quando você pode fazer:

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

Cometi um erro no último post. Este é um exemplo prático de como passar argumentos adicionais na função de retorno de chamada:

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

Uma solução mais geral para enviar solicitações assíncronas usando a .ajax()API jQuery e fechamentos para passar parâmetros adicionais para a função de retorno de chamada:

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 mim e para outros iniciantes que acabaram de entrar em contato com Javascript,
acho que isso Closeure Solutioné meio confuso demais.

Enquanto eu descobri isso, você pode facilmente passar quantos parâmetros quiser para cada retorno de chamada ajax usando jquery.

Aqui estão duas soluções mais fáceis .

Primeiro, que o @zeroasterisk mencionou acima, exemplo:

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

Segundo, passe dados auto-definidos adicionando-os ao XHR object que existem em toda a vida útil do 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 você pode ver, essas duas soluções têm uma desvantagem: você precisa escrever um pouco mais de código a cada vez do que apenas escrever:

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

Leia mais sobre $ .ajax: http://api.jquery.com/jquery.ajax/

Se alguém ainda vier aqui, esta é minha opinião:

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

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

O que acontece aqui, após a ligação à função de retorno de chamada, ela estará disponível na função como this .

Essa ideia vem de como o React usa a bindfuncionalidade.

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

Maneira secundária:

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

na verdade, seu código não está funcionando porque quando você escreve:

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

você coloca uma chamada de função como o terceiro parâmetro em vez de uma referência de função .

Como um adendo à resposta de b01 , o segundo argumento de $.proxyé frequentemente usado para preservar a thisreferência. Os argumentos adicionais passados ​​para $.proxysão aplicados parcialmente à função, preenchendo-a previamente com dados. Observe que qualquer argumento $.posttransmitido para o retorno de chamada será aplicado no final, portanto, doSomethingdeve haver aqueles no final de sua 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;
}

Essa abordagem também permite que vários argumentos sejam vinculados ao retorno de chamada:

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