Definition der jQuery Ajax Success Callback-Funktion

89

Ich möchte jQuery Ajax verwenden, um Daten von einem Server abzurufen.

Ich möchte die Definition der Erfolgsrückruffunktion .ajax()wie folgt außerhalb des Blocks platzieren. Muss ich die Variable also dataFromServerwie folgt deklarieren , damit ich die vom Erfolgsrückruf zurückgegebenen Daten verwenden kann?

Ich habe gesehen, dass die meisten Leute den Erfolgsrückruf innerhalb des .ajax()Blocks definieren. Ist der folgende Code also korrekt, wenn ich den Erfolgsrückruf außerhalb definieren möchte?

var dataFromServer;  //declare the variable first

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData(dataFromServer)
    })
}

function handleData(data) {
    alert(data);
    //do some stuff
}
Tonga
quelle

Antworten:

93

Benutz einfach:

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

Die successEigenschaft erfordert nur einen Verweis auf eine Funktion und übergibt die Daten als Parameter an diese Funktion.

Sie können auf diese handleDataFunktion auf diese Weise zugreifen, da der Weg handleDatadeklariert ist. JavaScript analysiert Ihren Code vor der Ausführung auf Funktionsdeklarationen, sodass Sie die Funktion in Code verwenden können, der vor der eigentlichen Deklaration liegt. Dies wird als Heben bezeichnet .

Dies gilt jedoch nicht für Funktionen, die wie folgt deklariert wurden:

var myfunction = function(){}

Diese sind nur verfügbar, wenn der Dolmetscher sie bestanden hat.

In dieser Frage finden Sie weitere Informationen zu den beiden Möglichkeiten, Funktionen zu deklarieren

Cerbrus
quelle
1
@Alnitak, wann wurde das deferred objectsDing vorgestellt? Ich habe es noch nie gesehen. Außerdem scheint es etwas chaotisch zu sein, da sich der Code, der definiert, welcher Rückruf verwendet werden soll, an einem anderen Ort befindet als der eigentliche AJAX-Aufruf.
Cerbrus
4
Es wurde in jQuery 1.5 eingeführt und ist weitaus weniger chaotisch als die Verwendung success:. Das Entkoppeln des Rückrufs von der AJAX ist eine gute Sache! Siehe die Notizen, die ich gerade am Ende meiner Antwort hinzugefügt habe.
Alnitak
@ Alnitak, ich werde einen Blick darauf werfen. Mal sehen, ob ich überzeugt werden kann: P
Cerbrus
@Alnitak: Werden zurückgestellte Objekte immer dem erfolgreichen Rückruf vorgezogen? Vielen Dank.
Tonga
@ Tonga IMHO, ja, sehr bevorzugt. Wenn Ihr Code $.get()beispielsweise verwendet worden wäre, wäre es unmöglich gewesen, einen error:Handler hinzuzufügen, da dieser $.getnicht unterstützt wird. Sie können jedoch ein .failzum verzögerten Ergebnis von hinzufügen $.get.
Alnitak
197

Die "neue" Methode seit jQuery 1.5 (Januar 2011) besteht darin, verzögerte Objekte zu verwenden, anstatt einen successRückruf zu übergeben. Sie sollten Rückkehr das Ergebnis $.ajaxund verwenden Sie dann die .done, .failetc Methoden , um die Rückrufe hinzufügen außerhalb des $.ajaxAnrufs .

function getData() {
    return $.ajax({
        url : 'example.com',
        type: 'GET'
    });
}

function handleData(data /* , textStatus, jqXHR */ ) {
    alert(data);
    //do some stuff
}

getData().done(handleData);

Dadurch wird die Rückrufbehandlung von der AJAX-Behandlung entkoppelt , und Sie können mehrere Rückrufe, Fehlerrückrufe usw. hinzufügen, ohne jemals die ursprüngliche getData()Funktion ändern zu müssen. Es ist eine gute Sache, die AJAX-Funktionalität von den danach auszuführenden Aktionen zu trennen! .

Zurückgestellte ermöglichen auch eine viel einfachere Synchronisation mehrerer asynchroner Ereignisse, mit denen Sie nicht einfach umgehen können success:

Zum Beispiel könnte ich mehrere Rückrufe hinzufügen, einen Fehlerbehandler, und warten, bis ein Timer abgelaufen ist, bevor ich fortfahre:

// a trivial timer, just for demo purposes -
// it resolves itself after 5 seconds
var timer = $.Deferred();
setTimeout(timer.resolve, 5000);

// add a done handler _and_ an `error:` handler, even though `getData`
// didn't directly expose that functionality
var ajax = getData().done(handleData).fail(error);

$.when(timer, ajax).done(function() {
    // this won't be called until *both* the AJAX and the 5s timer have finished
});

ajax.done(function(data) {
    // you can add additional callbacks too, even if the AJAX call
    // already finished
});

Andere Teile von jQuery verwenden ebenfalls verzögerte Objekte. Sie können jQuery-Animationen sehr einfach mit anderen asynchronen Vorgängen synchronisieren.

Alnitak
quelle
1
@ Cerbrus sehen Sie das neue Beispiel, und überlegen Sie dann, wie Sie es ohne zurückgestellte Objekte tun würden
Alnitak
@jbl zurückgestellte Objekte sind fantastisch. Normalerweise stimme ich jede Antwort ab, die die Verwendung fördert, success:weil verzögerte Antworten einfach viel besser funktionieren.
Alnitak
@ Cerbrus genau so soll es interpretiert werden. Schlagen Sie hier für die Suche user:6782 deferredfür viele weitere Beispiele.
Alnitak
Wie könnte man dies mit einem Formularübermittlungsereignis nutzen?
haakym
Das alertaber ... würde ich persönlich benutzen console.log(data)oder wenn es ein Array ist: console.table(data):)
Armstrongest
16

Ich weiß nicht, warum Sie den Parameter außerhalb des Skripts definieren. Das ist unnötig. Ihre Rückruffunktion wird mit den Rückgabedaten als Parameter automatisch aufgerufen. Es ist sehr gut möglich, Ihren Rückruf außerhalb des sucess:ie zu definieren

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

function handleData(data) {
    alert(data);
    //do some stuff
}

Die handleData-Funktion wird aufgerufen und der Parameter von der Ajax-Funktion an sie übergeben.

BinaryTox1n
quelle
6

Versuchen Sie, Ihren Erfolgshandler wie folgt umzuschreiben:

success : handleData

Die Erfolgseigenschaft der Ajax-Methode erfordert nur einen Verweis auf eine Funktion.

In Ihrer handleData-Funktion können Sie bis zu 3 Parameter verwenden:

object data
string textStatus
jqXHR jqXHR
Nicht definiert
quelle
5

Ich würde schreiben :

var handleData = function (data) {
    alert(data);
    //do some stuff
}


function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}
jbl
quelle
15
Ihr Code wird nie verwendet, dataFromServersodass die erste Zeile entfernt werden kann.
Anthony Grist
2

nach ein paar stunden damit spielen und fast langweilig werden. Wunder kam zu mir, es funktioniert.

<pre>


var listname = [];   


 $.ajax({
    url : wedding, // change to your local url, this not work with absolute url
    success: function (data) {
       callback(data);
    }
});

function callback(data) {
      $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
             //   $('#displayImage1').append( "<img src='" + wedding + val +"'>" );
                 listname.push(val);
            } 
        });
}

function myfunction() {

alert (listname);

}

</pre>
Võ Minh
quelle
1
Sie müssen keinen weiteren Funktionsaufruf für den Erfolg setzen. Sie können direkt sagen, dass success : callbackjquery Ihre Funktion auslöst, die callbackmit dem darin enthaltenen dataParameter aufgerufen wird .
Olgun Kaya
1

Sie müssen die Variable nicht deklarieren. Die Ajax-Erfolgsfunktion akzeptiert automatisch bis zu 3 Parameter:Function( Object data, String textStatus, jqXHR jqXHR )

Lukas Bijaminas
quelle
-1

In Ihrer Komponente, dh eckiger JS-Code:

function getData(){
    window.location.href = 'http://localhost:1036/api/Employee/GetExcelData';
}
Shivani Jadhav
quelle