首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何等待ajax请求?

如何等待ajax请求?
EN

Stack Overflow用户
提问于 2014-12-23 08:11:08
回答 5查看 80K关注 0票数 36

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

document.getElementById("btn_submit").onclick =验证;

谢谢!

代码语言:javascript
复制
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);               
        }
    });
}
EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2019-04-25 03:33:23

使用async/await和像Babel这样的转译器来让它在旧的浏览器中工作。您还必须从npm安装这个Babel预设和polyfill :npm I -D babel- preset -env babel-polyfill。

代码语言:javascript
复制
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回调只是编写相同逻辑的另一种方式。

代码语言:javascript
复制
getData(ajaxurl).then(function(res) {
    console.log(res)
}
票数 31
EN

Stack Overflow用户

发布于 2014-12-23 08:28:29

使用AJAX async: false 是一个非常糟糕的想法,而且从一开始就违背了使用AJAX的全部目的-AJAX应该是异步的。如果您想在进行AJAX调用时等待脚本的响应,只需使用延迟对象和承诺:

代码语言:javascript
复制
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的混合-如果您坚持其中一种会有所帮助:)

票数 16
EN

Stack Overflow用户

发布于 2021-06-08 16:52:34

永远不要使用async:false它是危险的,你的应用程序可能会表现不佳。

仅当响应返回promise时,才能使用await。

不幸的是,jQuery ajax在完成时不会返回Promise。

但是您可以在ajax请求中使用promise,并在完成时返回promise。

代码语言:javascript
复制
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。

代码语言:javascript
复制
try{
    const result = await asyncAjax('your url');
} catch(e){
    console.log(e);
}
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27612372

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档