어떻게 아약스 요청을 기다리죠?

어떻게 아약스 요청을 기다리죠?

지정된 번호가 이미 데이터베이스에 존재하는 경우 "btn_submit" 버튼의 .onclick 이벤트를 취소하는 JS 코드를 작성하려고 합니다.AJAX를 사용하여 DB에 지정된 번호를 조회하고,가 질문을 업로드하는 .php 사이트로 데이터를 전송해야 하는지 여부를 판단합니다.이것을 판단하려면 numOfRows 변수의 값이 필요하지만, AJAX에서 설정했기 때문에 값은 0으로 유지됩니다.검증() 함수는 AJAX 쿼리가 종료되기 전에 종료되며, 이로 인해 항상 지정된 번호가 DB에 존재하지 않음을 나타내는 문제가 발생합니다(numOfRows는 항상 0에 머무릅니다).검증() 함수의 끝줄에서 numOfRows를 0과 비교하기 전에 어떻게 AJAX 쿼리가 끝날 때까지 기다려야 합니까?번호가 이미 DB에 있는 경우 다음 행에 false를 반환해야 합니다.

document.getElementById("btn_submit")를 클릭합니다.= validation;

감사해요!

var textAreaList;
var numOfRows = 0;
var finished = false;

document.getElementById("btn_submit").onclick = validation;

textAreaList = document.getElementsByClassName("text_input");

function validation() {
    loadNumRows();

    try {
        document.getElementById('failure').hidden = true;
    }
     catch(e) {
         console.log(e.message);
     }
    textAreaList = document.getElementsByClassName("text_input");
    var failValidation = false;
    for (var i = 0; i < textAreaList.length; i++) {
        console.log(textAreaList[i]);
        if (textAreaList[i].value == "") {
            textAreaList[i].style.border = "2px solid #ff0000";
            failValidation = true;
        } else {
            textAreaList[i].style.border = "2px solid #286C2B";
        }
    }

    return !(failValidation || numOfRows != 0);
}

function loadNumRows(){
    $.ajax({
        url: 'php/SeeIfNumberExists?number=' + document.getElementById('number_inp').value,
        type: "GET",
        cache: false,
        success: function (html) {
           numOfRows = parseInt(html);               
        }
    });
}

입니다.async/await바벨과 같은 트랜스필러로 오래된 브라우저에서 작동하도록 합니다.바벨 바벨 npm npm.

npm i -D babel-preset-env babel-polyfill

그리고나서

function getData(ajaxurl) { 
  return $.ajax({
    url: ajaxurl,
    type: 'GET',
  });
};

async function test() {
  try {
    const res = await getData('https://api.icndb.com/jokes/random')
    console.log(res)
  } catch(err) {
    console.log(err);
  }
}

test();

★★★.then콜백은 같은 논리를 쓰는 또 다른 방법일 뿐입니다.

getData(ajaxurl).then((res) => {
    console.log(res)
});

를 사용하는 것은 매우 나쁜 생각이며, AJAX 를 사용하는 목적 전체를 무효로 합니다.AJAX 콜을 발신할 때 스크립트의 응답을 기다리는 경우 지연된 개체와 약속을 사용합니다.

var validation = function () {
    var numberCheck = $.ajax({
        url: 'php/SeeIfNumberExists?number=' + $('#number_inp').val(),
        type: "GET"
    });

    // Listen to AJAX completion
    numberCheck.done(function(html) {
        var numOfRows = parseInt(html),
            textAreaList = $('.text_input'),
            finished = false;

        // Rest of your code starts here
        try {
            document.getElementById('failure').hidden = true;
        }
        catch(e) {
            console.log(e.message);
        }

        // ... and the rest
    });

}

// Bind events using jQuery
$('#btn_submit').click(validation);

코드에는 네이티브 JS와 jQuery가 혼재되어 있는 것을 알 수 있습니다.하나를 고수하면 도움이 됩니다.

사용하지 .async:false위험합니다. 앱이 잘못되었을 수 있습니다.

응답이 약속을 반환한 경우에만 wait를 사용할 수 있습니다.

안타깝게도 jQuery ajax는 완료 시 Promise를 반환하지 않습니다.

그러나 Ajax 요청에서 약속을 사용하고 완료되면 약속을 반환할 수 있습니다.

function asyncAjax(url){
    return new Promise(function(resolve, reject) {
            $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                beforeSend: function() {            
                },
                success: function(data) {
                    resolve(data) // Resolve promise and when success
                },
                error: function(err) {
                    reject(err) // Reject the promise and go to catch()
                }
            });
    });
}

ajax 콜을 약속으로 변환하여 wait를 사용할 수 있게 되었습니다.

try{
    const result = await asyncAjax('your url');
} catch(e){
    console.log(e);
}

이거면 돼

async function doAjax() {
    const result = await $.ajax({
        url: "https://api.exchangerate-api.com/v4/latest/USD",
        type: 'GET',
    });

    return result;
}

async function tt(){
    var res = await doAjax()
    var money = res.rates.INR
    console.log(money)
}

tt()

(이 방법이 최선의 방법은 아니지만, 이것이 코드를 그대로 작동시키는 가장 빠른 방법입니다.그러나 진정한 비동기 Ajax에서 작동하려면 numOfRows 값을 가져오는 방법을 다시 생각해 보아야 합니다.그 모든 말들이...):

설정으로 시작async : false에서$.ajaxAjax의 A는 비동기(asynchronous)를 나타냅니다.즉, 실행이 반환되기를 기다리는 대신 계속 실행됩니다.이 기능을 끄려고 합니다(즉, 동기화).사실, 당신이 가지고 있는 코드를 고려하면, 그것이 전체 해결책일 것입니다.

$.ajax({
        url: 'php/SeeIfNumberExists?number=' + document.getElementById('number_inp').value,
        type: "GET",
        async: false,
        cache: false,
        success: function (html) {
           numOfRows = parseInt(html);               
        }
    });

$.ajax에 대한 의사의 경고:

교차 도메인 요청 및 dataType: "jsonp" 요청은 동기 작업을 지원하지 않습니다.동기요구는 일시적으로 브라우저를 잠그고 요청이 활성화되어 있는 동안 모든 액션이 비활성화될 수 있습니다.jQuery 1.8부터는 jqXHR($.Deferred)에서 async: false를 사용하는 것이 권장되지 않습니다.jqXHR.done()이나 폐지된jQXHR success() 등의 jqXHR 객체의 대응하는 메서드 대신 success/error/complete 콜백옵션을 사용해야 합니다.

언급URL : https://stackoverflow.com/questions/27612372/how-to-await-the-ajax-request