我试图写一个JS代码,将取消“btn_submit”buttons .onclick事件,如果给定的数字已经存在于数据库中。我使用 AJAX 查询给定数字的数据库,并确定是否应该将数据发送到一个.php网站,该网站将上传问题。为了确定这一点,我需要numOfRows变量的值,但因为我在 AJAX 中设置了它,所以它将保持为0。validation()函数将在我 AJAX 查询完成之前完成,这会导致问题,即总是声明给定的数字在DB中不存在(numOftail将始终保持为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);
}
});
}
5条答案
按热度按时间ergxz8rk1#
使用
async/await
和像Babel这样的转译器来让它在旧的浏览器中工作。你还需要从npm安装这个Babel preset和polyfill:然后
或者
.then
回调只是编写相同逻辑的另一种方式。h7appiyu2#
使用
async: false
是一个非常糟糕的主意,并且首先击败了使用 AJAX 的整个目的- AJAX意味着异步。如果你想在进行 AJAX 调用时等待脚本的响应,只需使用deferred对象和promise:我在你的代码中看到,你使用了原生JS和jQuery的混合体-如果你坚持使用其中一个,它会有所帮助:)
w6mmgewl3#
永远不要使用
async:false
,它很危险,你的应用程序可能会行为不端。只有当响应返回promise时才能使用await。
不幸的是,jQuery AJAX 在完成时不会返回Promise。
但是你可以 AJAX 请求中使用promise,并在完成时返回promise。
我们已经将 AJAX 调用转换为promise,所以现在可以使用await了。
qqrboqgw4#
这个对我很有效
jecbmhm35#
首先在
$.ajax
调用中设置async : false
。 AJAX 中的A代表 * 异步 *。这意味着,执行将继续,而不是等待它返回。你想把它关掉(即。使其 * 同步 *)。实际上,这应该是整个解决方案,因为你有代码。$.ajax文档中的一个警告:
跨域请求和数据类型:“jsonp”请求不支持同步操作。请注意,同步请求可能会暂时锁定浏览器,从而在请求处于活动状态时禁用任何操作。从jQuery 1.8开始,使用async:jqXHR($.Deferred)中的false已弃用;必须使用success/error/complete回调选项,而不是jqXHR对象的相应方法,如jqXHR.done()或已弃用的jqXHR.success()。