Come posso fare in modo che jQuery attenda il termine di una chiamata Ajax prima che ritorni?

Ho una funzione lato server che richiede il login. Se l'utente ha effettuato l'accesso, la funzione restituirà 1 in caso di successo. In caso contrario, la funzione restituirà la pagina di accesso.

Voglio chiamare la funzione usando Ajax e jQuery. Quello che faccio è inviare la richiesta con un link normale, con una funzione click applicata su di essa. Se l'utente non ha effettuato l'accesso o la funzione ha esito negativo, desidero che la chiamata Ajax ritorni vera, in modo che l'href si attivi.

Tuttavia, quando utilizzo il seguente codice, la funzione termina prima che venga eseguita la chiamata Ajax.

Come posso reindirizzare l'utente con garbo alla pagina di accesso?

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

Se non si desidera che la $.ajax()funzione ritorni immediatamente, impostare l' asyncopzione su 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;
            }
        }
    });
});

Tuttavia, noterei che questo sarebbe contrario al punto di AJAX. Inoltre, dovresti gestire la risposta nelle funzioni errore success. Tali funzioni verranno chiamate solo quando la risposta viene ricevuta dal server.

Non sto usando $.ajaxma le funzioni $.poste $.get, quindi se devo aspettare la risposta, uso questo:

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

L'oggetto XMLHttpRequest sottostante (utilizzato da jQuery per effettuare la richiesta) supporta la proprietà asincrona. Impostalo su false . Piace

async: false

Invece di impostare asincrono su falso, che di solito è una cattiva progettazione, potresti voler considerare di bloccare l'interfaccia utente mentre l'operazione è in sospeso.

Questo può essere ottenuto con le promesse di jQuery come segue:

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

con questo ora puoi fare:

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

E l'interfaccia utente verrà bloccata fino a quando non verrà restituito il comando Ajax

vedi jsfiddle

Penso che le cose sarebbero più facili se codifichi la tua successfunzione per caricare la pagina appropriata invece di tornare trueo false.

Ad esempio invece di tornare truepuoi fare:

window.location="appropriate page";

In questo modo, quando viene chiamata la funzione di successo, la pagina viene reindirizzata.

Nel moderno JS puoi semplicemente usare async/ await, come:

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

Quindi chiamalo in una asyncfunzione come:

let response = await upload();

Dal momento che non lo vedo menzionato qui, ho pensato di sottolineare anche che l' istruzione jQuery when può essere molto utile per questo scopo.

Il loro esempio è simile al seguente:

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

La parte "then" non verrà eseguita fino alla fine della parte "when".

Dovrebbe attendere fino al completamento della richiesta. Dopodiché tornerò ottenere il corpo della richiesta da dove viene chiamata la funzione.

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