如何等待ajax请求？
我正在尝试编写一个JS代码，如果给定的数字已经存在于数据库中，它将取消"btn_submit“按钮.onclick事件。我使用AJAX向DB查询给定的数字，并确定是否应该将数据发送到将上传问题的.php站点。为了确定这一点，我需要numOfRows变量的值，但是因为我在AJAX中设置了它，所以它将保持为0。validation()函数将在我的AJAX查询完成之前完成，这将导致问题，该问题将始终声明给定的数字不存在于数据库中(numOfRows将始终保持为0)。在比较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);
}
});
}回答 5
Stack Overflow用户
发布于 2019-04-25 03:33:23
使用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)
}Stack Overflow用户
发布于 2014-12-23 08:28:29
使用AJAX 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的混合-如果您坚持其中一种会有所帮助:)
Stack Overflow用户
发布于 2021-06-08 16:52:34
永远不要使用async:false它是危险的，你的应用程序可能会表现不佳。
仅当响应返回promise时，才能使用await。
不幸的是，jQuery ajax在完成时不会返回Promise。
但是您可以在ajax请求中使用promise，并在完成时返回promise。
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调用转换为promise，所以现在我们可以使用await。
try{
const result = await asyncAjax('your url');
} catch(e){
console.log(e);
}https://stackoverflow.com/questions/27612372
复制相似问题
腾讯云开发者
