如何等待ajax请求？

php javascript jquery ajax

2022-08-30 12:41:19

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

document.getElementById（“btn_submit”）.onclick = 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);               
        }
    });
}

答案 1

与像 Babel 这样的转译器一起使用，使其在较旧的浏览器中正常工作。您还必须从 npm 安装此 Babel 预设和 polyfill：async/await

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

答案 2

使用异步：false 是一个非常糟糕的主意，并且首先违背了使用 AJAX 的整个目的 — 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 - 如果你坚持一个:)