jQuery passe plus de paramètres dans le rappel

Existe-t-il un moyen de passer plus de données dans une fonction de rappel dans jQuery?

J'ai deux fonctions et je veux que le rappel à $.post, par exemple, passe à la fois les données résultantes de l'appel AJAX, ainsi que quelques arguments personnalisés

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

}

Je veux pouvoir transmettre mes propres paramètres à un rappel, ainsi que le résultat renvoyé par l'appel AJAX.

La solution est la liaison des variables par la fermeture.

Comme exemple plus basique, voici un exemple de fonction qui reçoit et appelle une fonction de rappel, ainsi qu'un exemple de fonction de rappel:

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

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

Cela appelle le rappel et fournit un seul argument. Maintenant, vous voulez fournir un argument supplémentaire, vous devez donc boucler le rappel en fermeture.

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

Ou, plus simplement en utilisant les fonctions fléchées ES6 :

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

Quant à votre exemple spécifique, je n'ai pas utilisé la .postfonction dans jQuery, mais une analyse rapide de la documentation suggère que le rappel devrait être un pointeur de fonction avec la signature suivante:

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

Je pense donc que la solution est la suivante:

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-ce qui se passe?

Dans la dernière ligne, doSomething(extraStuff)est invoqué et le résultat de cette invocation est un pointeur de fonction .

Parce qu'il extraStuffest passé en argument, doSomethingil est dans le cadre de la doSomethingfonction.

Lorsque extraStuffest référencé dans la fonction interne anonyme retournée, doSomethingil est lié par la fermeture à l' extraStuffargument de la fonction externe . Cela est vrai même après doSomethingson retour.

Je n'ai pas testé ce qui précède, mais j'ai écrit un code très similaire au cours des dernières 24 heures et cela fonctionne comme je l'ai décrit.

Vous pouvez bien sûr transmettre plusieurs variables au lieu d'un seul objet «extraStuff» en fonction de vos préférences personnelles / normes de codage.

Lorsque vous utilisez doSomething(data, myDiv), vous appelez en fait la fonction et ne faites pas de référence à elle.

Vous pouvez soit passer la doStomethingfonction directement, mais vous devez vous assurer qu'elle a la signature correcte.

Si vous voulez continuer à faire quelque chose comme ça, vous pouvez envelopper son appel dans une fonction anonyme.

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

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

Dans le code de fonction anonyme, vous pouvez utiliser les variables définies dans la portée englobante. C'est ainsi que fonctionne la portée de Javascript.

C'est en fait plus facile que tout le monde le fait sonner ... surtout si vous utilisez la $.ajax({})syntaxe de base par rapport à l'une des fonctions d'assistance.

Passez simplement la key: valuepaire comme vous le feriez sur n'importe quel objet, lorsque vous configurez votre demande ajax ... (car $(this)n'ayant pas encore changé de contexte, c'est toujours le déclencheur de l'appel de liaison ci-dessus)

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

L'une des raisons pour lesquelles cela vaut mieux que de définir la var, c'est que la var est globale et en tant que telle, écrasable ... si vous avez 2 choses qui peuvent déclencher des appels ajax, vous pourriez en théorie les déclencher plus rapidement que l'appel ajax ne répond, et vous auriez la valeur pour le deuxième appel passé dans le premier. En utilisant cette méthode, ci-dessus, cela ne se produirait pas (et c'est assez simple à utiliser aussi).

Dans le monde d'aujourd'hui, il existe une autre réponse qui est plus propre et tirée d'une autre réponse 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.
    ...
}

Voici la question et la réponse d'origine: jQuery COMMENT FAIRE ?? passer des paramètres supplémentaires pour réussir le rappel pour l'appel $ .ajax?

Vous pouvez également essayer quelque chose comme ceci:

function clicked() {

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

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

function doSomething(curData, curDiv) {

}

Vous pouvez utiliser une fermeture de JavaScript:

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

et quand vous pouvez faire:

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

J'ai fait une erreur dans le dernier mon post. C'est un exemple de travail pour savoir comment passer un argument supplémentaire dans la fonction de rappel:

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

Allons simple! :)

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

Une solution plus générale pour envoyer des requêtes asynchrones à l'aide de l' .ajax()API jQuery et des fermetures pour transmettre des paramètres supplémentaires à la fonction de rappel:

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

Pour moi, et pour les autres débutants qui viennent de contacter Javascript,
je pense que Closeure Solutionc'est un peu trop déroutant.

Bien que je trouve cela, vous pouvez facilement passer autant de paramètres que vous le souhaitez à chaque rappel ajax en utilisant jquery.

Voici deux solutions plus simples .

Premier, dont @zeroasterisk a mentionné ci-dessus, exemple:

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

Deuxièmement, passez des données auto-définies en les ajoutant à celles XHR object qui existent dans toute la durée de vie 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 );
            ...
        } 
    });
});

Comme vous pouvez le voir, ces deux solutions ont un inconvénient: vous avez besoin d'écrire un peu plus de code à chaque fois que d'écrire simplement:

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

En savoir plus sur $ .ajax: http://api.jquery.com/jquery.ajax/

Si quelqu'un vient encore ici, voici mon avis:

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

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

Ce qui se passe ici, après la liaison à la fonction de rappel, il sera disponible dans la fonction en tant que this.

Cette idée vient de la façon dont React utilise la bindfonctionnalité.

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

Voie secondaire:

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 fait, votre code ne fonctionne pas car lorsque vous écrivez:

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

vous placez un appel de fonction comme troisième paramètre plutôt qu'une référence de fonction .

En complément de la réponse de b01 , le deuxième argument de $.proxyest souvent utilisé pour conserver la thisréférence. Les arguments supplémentaires passés à $.proxysont partiellement appliqués à la fonction, en la préremplissant de données. Notez que tous les arguments $.postpassés au rappel seront appliqués à la fin, donc doSomethingdevraient avoir ceux à la fin de sa liste d'arguments:

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

Cette approche permet également de lier plusieurs arguments au rappel:

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