jQuery übergibt mehr Parameter an den Rückruf

Gibt es eine Möglichkeit, mehr Daten an eine Callback-Funktion in jQuery zu übergeben?

Ich habe zwei Funktionen und ich möchte den Rückruf an die $.postum beispielsweise sowohl die Ergebnisdaten des AJAX-Aufrufs als auch einige benutzerdefinierte Argumente zu übergeben

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

}

Ich möchte in der Lage sein, meine eigenen Parameter an einen Rückruf sowie das vom AJAX-Aufruf zurückgegebene Ergebnis zu übergeben.

Die Lösung ist die Bindung von Variablen durch Schließung.

Als einfacheres Beispiel ist hier eine Beispielfunktion, die eine Callback-Funktion empfängt und aufruft, sowie eine Beispiel-Callback-Funktion:

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

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

Dies ruft den Callback auf und liefert ein einzelnes Argument. Jetzt möchten Sie ein zusätzliches Argument bereitstellen, also schließen Sie den Rückruf ab.

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

Oder einfacher mit ES6 Pfeilfunktionen:

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

Was Ihr spezifisches Beispiel betrifft, habe ich die nicht verwendet .post Funktion in jQuery, aber ein kurzer Scan der Dokumentation legt nahe, dass der Rückruf a sein sollte Funktionszeiger mit folgender Signatur:

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

Daher denke ich, dass die Lösung wie folgt ist:

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

Was ist los?

In der letzten Zeile, doSomething(extraStuff) ist aufgerufen und das Ergebnis dieses Aufrufs ist a Funktionszeiger.

Denn extraStuff wird als Argument an übergeben doSomething es liegt im Geltungsbereich der doSomething Funktion.

Wann extraStuff wird in der zurückgegebenen anonymen inneren Funktion von referenziert doSomething sie ist durch Schließung an die äußere Funktion gebunden extraStuff Streit. Das gilt auch danach doSomething ist zurückgekommen.

Ich habe das obige nicht getestet, aber ich habe in den letzten 24 Stunden sehr ähnlichen Code geschrieben und es funktioniert so, wie ich es beschrieben habe.

Sie können natürlich mehrere Variablen anstelle eines einzelnen ‘extraStuff’-Objekts übergeben, abhängig von Ihren persönlichen Vorlieben/Codierungsstandards.

Beim Benutzen doSomething(data, myDiv)rufen Sie die Funktion tatsächlich auf und verweisen nicht darauf.

Sie können entweder die bestehen doStomething direkt funktionieren, aber Sie müssen sicherstellen, dass es die richtige Signatur hat.

Wenn Sie doSomething so beibehalten möchten, wie es ist, können Sie seinen Aufruf in eine anonyme Funktion verpacken.

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

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

Innerhalb des anonymen Funktionscodes können Sie die im umschließenden Gültigkeitsbereich definierten Variablen verwenden. So funktioniert Javascript-Scoping.

Es ist tatsächlich einfacher, als alle es klingen lassen … besonders wenn Sie das verwenden $.ajax({}) Basissyntax im Vergleich zu einer der Hilfsfunktionen.

Pass einfach in die key: value Paar wie bei jedem Objekt, wenn Sie Ihre Ajax-Anfrage einrichten … (weil $(this) hat den Kontext noch nicht geändert, es ist immer noch der Auslöser für den obigen Bind-Aufruf)

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

Einer der Gründe, warum dies besser ist als das Setzen der var, ist, dass die var global und als solche überschreibbar ist … wenn Sie zwei Dinge haben, die Ajax-Aufrufe auslösen können, könnten Sie sie theoretisch schneller auslösen, als Ajax-Aufrufe antworten, und Sie würden den Wert für den zweiten Aufruf an den ersten übergeben. Mit dieser Methode oben würde das nicht passieren (und es ist auch ziemlich einfach zu benutzen).

In der heutigen Welt gibt es eine andere Antwort, die sauberer ist und aus einer anderen Stack Overflow-Antwort stammt:

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

Hier ist die ursprüngliche Frage und Antwort: jQuery HOW TO?? Übergeben Sie zusätzliche Parameter an den Erfolgs-Callback für $.ajax-Aufruf?

Sie können auch Folgendes versuchen:

function clicked() {

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

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

function doSomething(curData, curDiv) {

}

Sie können eine Schließung von JavaScript verwenden:

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

und wann kannst du:

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

Ich habe einen Fehler in meinem letzten Post gemacht. Dies ist ein funktionierendes Beispiel für die Übergabe zusätzlicher Argumente in der Callback-Funktion:

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