如何等待ajax请求?

2021/01/27 01:31 · jquery ·  · 0评论

我正在尝试编写一个JS代码,如果给定的数字已经存在于数据库中,它将取消“ btn_submit”按钮.onclick事件。我使用AJAX向数据库查询给定的数字,并确定是否应将数据发送到将上传问题的.php网站。为了确定这一点,我需要numOfRows变量的值,但是因为我在AJAX中将其设置为0,所以validation()函数将在我的AJAX查询完成之前完成,这将导致始终表示给定数字没有在数据库中存在(numOfRows将始终保持为0)。如何在我的validate()函数结尾处将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);               
        }
    });
}

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

使用async: false是一个非常糟糕的主意,并且一开始就破坏了使用AJAX的全部目的-AJAX是异步的。如果要在调用AJAX时等待脚本的响应,只需使用延迟对象和Promise:

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的混合使用-如果您坚持使用一个:

(我承认这不是处理问题的最佳方法,但这是使代码按原样工作的最快方法。尽管如此,实际上,您应该重新考虑如何提取numOfRows值,以便它可以与真正的异步Ajax一起使用。话虽如此...):

首先async : false$.ajax通话中进行设置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);您必须使用成功/错误/完成回调选项,而不是jqXHR对象的相应方法,例如jqXHR.done()或已弃用的jqXHR.success()。

本文地址:http://jquery.askforanswer.com/ruhedengdaiajaxqingqiu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!