Benötigen Sie Hilfe in AJAX Spinner Anzeige

Question

Ich mache eine AJAX-Anfrage, die tatsächlich so aussieht.

$loading = $("#loadingDiv") 
function loadBuildList() { 
    $.ajax({ 
    async:true, 
    url:"ajax_test.php", 
    beforeSend : function() { $loading.show(); }, 
    success : function() { $loading.hide() } 
    }); 
} 

Nun, ich brauche ein Spinner Bild anzuzeigen, während die Ajax ausgeführt wird, auch ist mein Code nicht soll weiter auszuführen, bis die Ausführung des Ajax vorbei ist. Wenn ich async:false mache, kann ich den Spinner nicht laden. Wenn ich async:true mache, kann ich nicht warten, bis die Ajax-Ausführung beendet ist.

Unten ist, wie ich die Funktion nenne loadBuildList

... 
//$loading.show(); // this I will use when aync : false 
loadBuildList() 
//$loading.hide(); 
... 

Wie kann ich eine solche Situation umgehen? Kann mir bitte jemand dabei helfen?

Answer 1

Sie sollten nie verwenden async:false, oder Sie werden den gesamten Ausführungsthread stoppen, bis es eine Antwort hat.

Alles was nach einer asynchronen Ausführung ausgeführt werden muss, in diesem Fall muss $.ajax in den Rückruf geschrieben werden. Das ist innen Erfolg für JQuery $.ajax.

$loading = $("#loadingDiv") 
function loadBuildList() { 
    $.ajax({ 
    async:true, 
    url:"ajax_test.php", 
    beforeSend : function() { $loading.show(); }, 
    success : function() { 
     $loading.hide(); 
     // Stuff after $.ajax goes here. 
    }, 
    fail: function() { 
     // Or here. 
    } 
    }); 
} 

Sie sollten auch eine Lese haben bei How do I return the response from an asynchronous call?

Answer 2

Auf der Basis von Code-Schnipsel Sie es dort zur Verfügung gestellt haben scheint, ist keine Notwendigkeit beforeSend zu verwenden, wie Sie gerade auf der Seite ein Gespräch. Sie können es folgendermaßen tun.

$loading = $("#loadingDiv"); 

function loadBuildList() { 
    $loading.show(); // Show spinner before AJAX call 
    $.ajax({ 
     async:true, 
     url:"ajax_test.php", 
     // beforeSend : function() { }, 
     success : function() { $loading.hide() } 
    }); 
} 

Sie können nach wie vor versuchen, es zu machen, wie durch @zurfyx erwähnt, aber in der Regel diese Praxis gefolgt wird, wenn Sie etwas zentralisiert und nicht benötigen für einzelne AJAX aufruft.

Answer 3

den Spinner Handhabung in Ordnung ist mit .complete (so sowohl Erfolg und Fehler aufgreift):

function loadBuildList() { 
    var loading = $("#loadingDiv") 
    loading.show(); 
    $.ajax({ 
     url:"ajax_test.php", 
     complete : function() { loading.hide() } 
    }); 
} 

Dies ist jedoch Kommentar interessanter:

mein Code soll nicht weiter auszuführen

Es ist nicht so, dass Sie nicht weiter ausführen möchten, sondern dass Sie die Ausführung fortsetzen wollen, wenn der Ajax-Aufruf beendet ist ed.

Sie können dies tun, indem Sie das Objekt $ .ajax zurückgeben, das eine promise ist. Mit dem Versprechen können Sie Kettenaufrufe in Ihrem eigenen Code hinzufügen. Dies ist ähnlich wie ein Callback-Parameter zu verwenden, aber in der Regel flexibler:

function loadBuildList() { 
    return $.ajax({ 
    ... 
} 

// calling code 
loadBuildList().done(function() { 
    // code to run when the list has loaded 
});