如何等待ajax请求？

我正在尝试编写一个JS代码，如果数据库中已存在给定的数字，它将取消“btn_submit”按钮.onclick事件。 我使用AJAX查询数据库中给定的数字，并确定是否应该将数据发送到将上传问题的.php站点。 为了确定这一点，我需要numOfRows变量的值，但因为我在AJAX中设置它将保持为0. validation（）函数将在我的AJAX查询完成之前完成，这会导致问题始终表明给定的数字不会存在于DB中（numOfRows将始终保持为0）。 在我将validation（）函数的结束行中的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); } }); } 

Answer 1

使用async: 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的混合 – 如果你坚持一个:)它会有所帮助:)

Answer 2

（我承认这不是解决问题的最佳方式，但这是使代码按原样运行的最快方法。实际上，您应该重新考虑如何提取numOfRows值以便它可以与真正的异步Ajax一起使用所有这一切……）：

首先在$.ajax调用中设置async : false 。 Ajax中的A代表异步 。 这意味着，继续执行而不是等待它返回。 你想关闭它（即使它同步 ）。 实际上，根据你所拥有的代码，这应该是整个解决方案。

 $.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开始，不推荐使用async：false和jqXHR（$ .Deferred）; 必须使用success / error / complete回调选项，而不是jqXHR对象的相应方法，如jqXHR.done（）或不推荐使用的jqXHR.success（）。