Wie lasse ich jQuery warten, bis ein Ajax-Aufruf beendet ist, bevor er zurückkehrt?

Ich habe eine serverseitige Funktion, für die eine Anmeldung erforderlich ist. Wenn der Benutzer angemeldet ist, gibt die Funktion bei Erfolg 1 zurück. Wenn nicht, gibt die Funktion die Anmeldeseite zurück.

Ich möchte die Funktion mit Ajax und jQuery aufrufen. Ich sende die Anfrage mit einem normalen Link, auf den eine Klickfunktion angewendet wird. Wenn der Benutzer nicht angemeldet ist oder die Funktion fehlschlägt, möchte ich, dass der Ajax-Aufruf true zurückgibt, damit die href ausgelöst wird.

Wenn ich jedoch den folgenden Code verwende, wird die Funktion beendet, bevor der Ajax-Aufruf abgeschlossen ist.

Wie kann ich den Benutzer ordnungsgemäß auf die Anmeldeseite umleiten?

$(".my_link").click(
    function(){
    $.ajax({
        url: $(this).attr('href'),
        type: 'GET',
        cache: false,
        timeout: 30000,
        error: function(){
            return true;
        },
        success: function(msg){ 
            if (parseFloat(msg)){
                return false;
            } else {
                return true;
            }
        }
    });
});

Wenn die $.ajax()Funktion nicht sofort zurückkehren soll, setzen Sie die asyncOption auf false:

$(".my_link").click(
    function(){
    $.ajax({
        url: $(this).attr('href'),
        type: 'GET',
        async: false,
        cache: false,
        timeout: 30000,
        error: function(){
            return true;
        },
        success: function(msg){ 
            if (parseFloat(msg)){
                return false;
            } else {
                return true;
            }
        }
    });
});

Ich möchte jedoch darauf hinweisen, dass dies dem Punkt von AJAX widerspricht. Außerdem sollten Sie die Antwort in den Funktionen errorund verarbeiten success. Diese Funktionen werden nur aufgerufen, wenn die Antwort vom Server empfangen wird.

Ich bin nicht mit , $.ajaxaber die $.postund $.getFunktionen, so dass , wenn ich auf die Antwort warten müssen, verwende ich diese:

$.ajaxSetup({async: false});
$.get("...");

Das zugrunde liegende XMLHttpRequest-Objekt (das von jQuery zum Erstellen der Anforderung verwendet wird) unterstützt die asynchrone Eigenschaft. Setzen Sie es auf false . Mögen

async: false

Anstatt async auf false zu setzen, was normalerweise ein schlechtes Design ist, sollten Sie die Benutzeroberfläche blockieren, während der Vorgang ansteht.

Dies kann mit jQuery-Versprechungen wie folgt erreicht werden:

// same as $.ajax but settings can have a maskUI property
// if settings.maskUI==true, the UI will be blocked while ajax in progress
// if settings.maskUI is other than true, it's value will be used as the color value while bloking (i.e settings.maskUI='rgba(176,176,176,0.7)'
// in addition an hourglass is displayed while ajax in progress
function ajaxMaskUI(settings) {
    function maskPageOn(color) { // color can be ie. 'rgba(176,176,176,0.7)' or 'transparent'
        var div = $('#maskPageDiv');
        if (div.length === 0) {
            $(document.body).append('<div id="maskPageDiv" style="position:fixed;width:100%;height:100%;left:0;top:0;display:none"></div>'); // create it
            div = $('#maskPageDiv');
        }
        if (div.length !== 0) {
            div[0].style.zIndex = 2147483647;
            div[0].style.backgroundColor=color;
            div[0].style.display = 'inline';
        }
    }
    function maskPageOff() {
        var div = $('#maskPageDiv');
        if (div.length !== 0) {
            div[0].style.display = 'none';
            div[0].style.zIndex = 'auto';
        }
    }
    function hourglassOn() {
        if ($('style:contains("html.hourGlass")').length < 1) $('<style>').text('html.hourGlass, html.hourGlass * { cursor: wait !important; }').appendTo('head');
        $('html').addClass('hourGlass');
    }
    function hourglassOff() {
        $('html').removeClass('hourGlass');
    }

    if (settings.maskUI===true) settings.maskUI='transparent';

    if (!!settings.maskUI) {
        maskPageOn(settings.maskUI);
        hourglassOn();
    }

    var dfd = new $.Deferred();
    $.ajax(settings)
        .fail(function(jqXHR, textStatus, errorThrown) {
            if (!!settings.maskUI) {
                maskPageOff();
                hourglassOff();
            }
            dfd.reject(jqXHR, textStatus, errorThrown);
        }).done(function(data, textStatus, jqXHR) {
            if (!!settings.maskUI) {
                maskPageOff();
                hourglassOff();
            }
            dfd.resolve(data, textStatus, jqXHR);
        });

    return dfd.promise();
}

Damit können Sie jetzt tun:

ajaxMaskUI({
    url: url,
    maskUI: true // or try for example 'rgba(176,176,176,0.7)'
}).fail(function (jqXHR, textStatus, errorThrown) {
    console.log('error ' + textStatus);
}).done(function (data, textStatus, jqXHR) {
    console.log('success ' + JSON.stringify(data));
});

Die Benutzeroberfläche wird blockiert, bis der Befehl ajax zurückgegeben wird

siehe jsfiddle

Ich denke, es wäre einfacher, wenn Sie Ihre successFunktion so codieren , dass die entsprechende Seite geladen wird, anstatt trueoder zurückzugeben false.

Anstatt zurückzukehren true, könnten Sie beispielsweise Folgendes tun:

window.location="appropriate page";

Auf diese Weise wird die Seite beim Aufrufen der Erfolgsfunktion umgeleitet.

In modernen JS können Sie einfach async/ verwenden await, wie:

  async function upload() {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: $(this).attr('href'),
            type: 'GET',
            timeout: 30000,
            success: (response) => {
                resolve(response);
            },
            error: (response) => {
                reject(response);
            }
        })
    })
}

Rufen Sie es dann in einer asyncFunktion wie:

let response = await upload();

Da ich es hier nicht erwähnt sehe, dachte ich, ich würde auch darauf hinweisen, dass die jQuery when- Anweisung für diesen Zweck sehr nützlich sein kann.

Ihr Beispiel sieht so aus:

$.when( $.ajax( "test.aspx" ) ).then(function( data, textStatus, jqXHR ) {
  alert( jqXHR.status ); // Alerts 200
});

Der "dann" -Teil wird erst ausgeführt, wenn der "wann" -Teil beendet ist.

Es sollte warten, bis die Anfrage abgeschlossen ist. Danach werde ich get request text zurückgeben, von wo aus die Funktion aufgerufen wird.

function foo() {
    var jqXHR = $.ajax({
        url: url,
        type: 'GET',
        async: false,
    });
    return JSON.parse(jqXHR.responseText);  
}