戻る前に、Ajax呼び出しが完了するのをjQueryに待機させるにはどうすればよいですか？

ログインが必要なサーバー側の機能があります。ユーザーがログインしている場合、関数は成功すると1を返します。そうでない場合、関数はログインページを返します。

AjaxとjQueryを使用して関数を呼び出したいのですが。私が行うことは、クリック機能が適用された通常のリンクを使用してリクエストを送信することです。ユーザーがログインしていないか、関数が失敗した場合、Ajax呼び出しがtrueを返すようにして、hrefがトリガーされるようにします。

ただし、次のコードを使用すると、Ajax呼び出しが完了する前に関数が終了します。

ユーザーをログインページに適切にリダイレクトするにはどうすればよいですか？

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

$.ajax()関数をすぐに返さない場合は、asyncオプションを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;
            }
        }
    });
});

しかし、これはAJAXのポイントに反することになると思います。また、errorおよびsuccess関数で応答を処理する必要があります。これらの関数は、サーバーから応答を受け取ったときにのみ呼び出されます。

と関数を使用して$.ajaxいませんが、応答を待つ必要がある場合は、これを使用します。$.post$.get

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

基になるXMLHttpRequestオブジェクト（jQueryが要求を行うために使用）は、非同期プロパティをサポートしています。falseに設定します。お気に入り

async: false

通常は設計が悪いasyncをfalseに設定する代わりに、操作が保留されている間はUIをブロックすることを検討してください。

これは、jQueryのpromiseで次のようにうまく実現できます。

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

これであなたは今やることができます：

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

そして、UIはajaxコマンドが戻るまでブロックします

jsfiddleを参照

or successを返す代わりに、適切なページをロードするように関数をコーディングすると、状況が簡単になると思います。truefalse

たとえば、返す代わりに次のようにtrueすることができます：

window.location="appropriate page";

このように、success関数が呼び出されると、ページがリダイレクトされます。

最近のJS では、次のようにasync/を使用するだけですawait。

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

次に、次のasyncような関数で呼び出します。

let response = await upload();

ここで言及されていないので、jQuery whenステートメントがこの目的に非常に役立つ可能性があることも指摘したいと思いました。

彼らの例は次のようになります：

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

「then」部分は、「when」部分が終了するまで実行されません。

要求が完了するまで待機する必要があります。その後、関数が呼び出された場所からgetリクエストの本文を返します。

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