php 如何等待 AJAX 请求?

polhcujo  于 2023-09-29  发布在  PHP
关注(0)|答案(5)|浏览(136)

我试图写一个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);               
        }
    });
}
ergxz8rk

ergxz8rk1#

使用async/await和像Babel这样的转译器来让它在旧的浏览器中工作。你还需要从npm安装这个Babel preset和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((res) => {
    console.log(res)
});
h7appiyu

h7appiyu2#

使用async: false是一个非常糟糕的主意,并且首先击败了使用 AJAX 的整个目的- AJAX意味着异步。如果你想在进行 AJAX 调用时等待脚本的响应,只需使用deferred对象和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的混合体-如果你坚持使用其中一个,它会有所帮助:)

w6mmgewl

w6mmgewl3#

永远不要使用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);
}
qqrboqgw

qqrboqgw4#

这个对我很有效

async function doAjax() {
    const result = await $.ajax({
        url: "https://api.exchangerate-api.com/v4/latest/USD",
        type: 'GET',
    });

    return result;
}

async function tt(){
    var res = await doAjax()
    var money = res.rates.INR
    console.log(money)
}

tt()
jecbmhm3

jecbmhm35#

  • (我承认这不是最好的方法,但这是让你的代码按原样工作的最快方法。但是,您应该重新考虑如何提取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文档中的一个警告:
跨域请求和数据类型:“jsonp”请求不支持同步操作。请注意,同步请求可能会暂时锁定浏览器,从而在请求处于活动状态时禁用任何操作。从jQuery 1.8开始,使用async:jqXHR($.Deferred)中的false已弃用;必须使用success/error/complete回调选项,而不是jqXHR对象的相应方法,如jqXHR.done()或已弃用的jqXHR.success()。

相关问题