ฉันจะทำให้ jQuery รอให้การโทร Ajax สิ้นสุดก่อนที่จะส่งคืนได้อย่างไร

ฉันมีฟังก์ชั่นฝั่งเซิร์ฟเวอร์ที่ต้องเข้าสู่ระบบ หากผู้ใช้เข้าสู่ระบบฟังก์ชั่นจะกลับ 1 เมื่อประสบความสำเร็จ ถ้าไม่ฟังก์ชั่นจะส่งคืนหน้าล็อกอิน

ฉันต้องการเรียกใช้ฟังก์ชันโดยใช้ Ajax และ jQuery สิ่งที่ฉันทำคือส่งคำขอพร้อมลิงก์ปกติโดยมีฟังก์ชั่นคลิกนำไปใช้กับมัน หากผู้ใช้ไม่ได้เข้าสู่ระบบหรือฟังก์ชั่นล้มเหลวฉันต้องการให้ Ajax-call ส่งกลับจริงดังนั้น 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 เพื่อทำการร้องขอ) สนับสนุนคุณสมบัติแบบอะซิงโครนัส ตั้งค่าเป็นเท็จ ชอบ

async: false

แทนที่จะตั้งค่า async เป็น false ซึ่งโดยปกติจะเป็นการออกแบบที่ไม่ดีคุณอาจต้องพิจารณาการบล็อก UI ในขณะที่การดำเนินการอยู่ระหว่างดำเนินการ

สิ่งนี้สามารถทำได้โดยสัญญา jQuery ดังนี้:

// 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

ผมคิดว่าสิ่งที่จะง่ายขึ้นถ้าคุณรหัสของคุณsuccessฟังก์ชั่นในการโหลดหน้าเว็บที่เหมาะสมแทนที่จะกลับหรือtruefalse

ตัวอย่างเช่นแทนที่จะส่งคืนtrueคุณสามารถทำได้:

window.location="appropriate page";

ด้วยวิธีนี้เมื่อเรียกใช้ฟังก์ชั่นความสำเร็จหน้าจะถูกเปลี่ยนเส้นทาง

ใน 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( $.ajax( "test.aspx" ) ).then(function( data, textStatus, jqXHR ) {
  alert( jqXHR.status ); // Alerts 200
});

ส่วน "จากนั้น" จะไม่ทำงานจนกว่าส่วน "เมื่อ" จะเสร็จสิ้น

ควรรอจนกว่าจะได้รับคำขอให้เสร็จสมบูรณ์ หลังจากนั้นฉันจะกลับมาขอเนื้อความจากตำแหน่งที่เรียกใช้ฟังก์ชัน

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