如何等待ajax请求？

Question

我正在尝试编写一个JS代码，如果给定的数字已经存在于数据库中，它将取消“
btn_submit”按钮.onclick事件。我使用AJAX向数据库查询给定的编号，并确定是否应将数据发送到将上传问题的.php站点。为了确定这一点，我需要numOfRows变量的值，但是因为我在AJAX中将其设置为0，所以validation（）函数将在我的AJAX查询完成之前完成，这将导致始终表示给定数字不存在的问题。在数据库中存在（numOfRows将始终保持为0）。在validation（）函数的结尾行中将numOfRows与0进行比较之前，如何等待AJAX​​查询完成？如果数据库中已经存在该数字，则需要在此行中返回false：

document.getElementById（“ btn_submit”）。onclick =验证；

谢谢！

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

Answer 1

async/await与Babel这样的编译器结合使用，以使其在旧版浏览器中运行。您还必须从npm安装此Babel预设和polyfill：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(function(res) {
    console.log(res)
}