jQuery가 Ajax 콜이 종료될 때까지 대기하도록 하려면 어떻게 해야 합니까?

jQuery가 Ajax 콜이 종료될 때까지 대기하도록 하려면 어떻게 해야 합니까?

로그인이 필요한 서버 측 기능이 있습니다.사용자가 로그인한 경우 함수는 성공 시 1을 반환합니다.그렇지 않으면 함수는 로그인 페이지를 반환합니다.

Ajax와 jQuery를 사용하여 함수를 호출하고 싶습니다.제가 하는 일은 일반 링크를 클릭 기능이 적용된 요청서를 제출하는 것입니다.사용자가 로그인하지 않았거나 함수가 실패했을 경우 Ajax-call이 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 " " " option to " " option to " )false:

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

AJAX, AJAX, AJAX, AJAX.은 the, 답, 음, 음의 URL에서 다루어야 .fail ★★★★★★★★★★★★★★★★★」done서버로부터 됩니다.이러한 함수는 서버로부터 응답이 수신되었을 때만 호출됩니다.

안 함$.ajax, ★★★★★★★★★★★★★★★★.$.post ★★★★★★★★★★★★★★★★★」$.get응답을 기다릴 필요가 있는 경우는, 다음과 같이 합니다.

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

기본 XMLHttpRequest 개체(jQuery에서 요청을 만드는 데 사용)는 비동기 속성을 지원합니다.false로 설정합니다.맘에 들다

async: false

일반적으로 잘못된 설계인 비동기 설정을 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하지 않고 true ★★★★★★★★★★★★★★★★★」false.

를 들어, 「」를 에, 「」를 반환한다.true을 사용하다

window.location="appropriate page";

이렇게 해서 성공함수가 호출되면 페이지가 리다이렉트랜다이렉트 됩니다

를 간단하게 사용할 수 .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" 파트가 완료될 때까지 실행되지 않습니다.

비동기 AJAX는 권장되지 않으므로 Promise와 함께 중첩된 비동기 함수를 사용해 보십시오.구문 오류가 있을 수 있습니다.

async function fetch_my_data(_url, _dat) {

   async function promised_fetch(_url, _dat) {

      return new Promise((resolve, reject) => {
         $.ajax({
            url:  _url,
            data: _dat,
            type: 'POST',
            success: (response) => {
               resolve(JSON.parse(response));
            },
            error: (response) => {
               reject(response);
            }
         });
      });
   }

   var _data = await promised_fetch(_url, _dat);
   
   return _data;
}

var _my_data = fetch_my_data('server.php', 'get_my_data=1');

get 요청이 완료될 때까지 기다려야 합니다.그 후 함수가 호출된 곳에서 요청 본문을 가져옵니다.

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

원래 질문은 12년 전 오늘의 질문으로, '어떻게 하면 jQuery가 Ajax의 콜이 돌아올 때까지 기다리도록 할 수 있는가?'였다.jQuery는 그 이후로 많은 발전을 이루었습니다.

위에 언급된 몇 가지 솔루션이 있으며, 최신 버전의 jQuery를 사용할 수 없습니다.$.when().then.()은 더 이상 지원되지 않는 'async:false'를 사용하지 않는 한 동기화되지 않는 것 같습니다.따라서 새로운 버전의 jQuery에서는 작동하지 않습니다.

그러나 약속은 jQuery ajax 호출에 포함되어 있기 때문에 Ajax 호출을 동기화하는 것은 그리 어렵지 않습니다.

저는 namesched js 함수를 사용하고 있기 때문에 아래의 예는 그 형식입니다.이 예는 사용자 입력이 기존 항목을 복제하려고 시도하지 않는지 확인하기 위해 서버를 호출하는 사용자 정의 양식 검증용입니다.

이 코드는 Babel을 사용하지 않는 한 IE 또는 레거시 엣지에서는 동작하지 않을 것입니다만, 이러한 브라우저는 Microsoft에서 지원되지 않기 때문에 차단하는 경향이 있습니다.

///Namespace validate
check: async function(settings){
    let IsValid = false;
    let Message = ''
    let data = await validate.serverCheck('function', value);
    IsValid = data.OK;
    Message = data.Message;
}

serverCheck: async function (fn, value) {
    var request = {
        validateValue: $.sanitize(value)
    };

    let result;

    try {
            result = await $.ajax({
                dataType: "json",
                type: "post",
                url: "/api/validate/" + fn + "/",
                data: request
        });

        return result;
    } catch (x) {}
}

그게 다야.

언급URL : https://stackoverflow.com/questions/755885/how-do-i-make-jquery-wait-for-an-ajax-call-to-finish-before-it-returns