如何知道jQuery是否有一个Ajax请求挂起?

I'm having some problems with a jQuery control we made. Suppose you have a dropdownlist that allows you to enter the ID of the item you're looking for, and when you press ENTER or lose focus in a textbox it validates via jQuery that the ID you entered is correct, showing an alert if it doesn't.

我对我们制作的jQuery控件有些问题。假设您有一个下拉列表，允许您输入要查找的项目的ID，当您在文本框中按enter或失去焦点时，它通过jQuery验证您输入的ID是否正确，如果不正确，则显示一个警告。

The thing is that when an ordinary user enters an invalid value in it and loses focus by pressing the submit button, the jQuery post returns after the submit of the form has been sent.

问题是，当普通用户在其中输入一个无效值并通过单击submit按钮失去焦点时，jQuery post将在表单提交后返回。

Is there any way that I can check if there's any Async request processing by jQuery so that I do not allow the form submit?

是否有办法检查是否有jQuery异步请求处理，不允许表单提交?

5 个解决方案

#1

You could use ajaxStart and ajaxStop to keep track of when requests are active.

您可以使用ajaxStart和ajaxStop来跟踪请求何时处于活动状态。

#2

196

$.active returns the number of active Ajax requests.

美元。active返回活动Ajax请求的数量。

More info here

更多的信息在这里

#3

 $(function () {
        function checkPendingRequest() {
            if ($.active > 0) {
                window.setTimeout(checkPendingRequest, 1000);
                //Mostrar peticiones pendientes ejemplo: $("#control").val("Peticiones pendientes" + $.active);
            }
            else {

                alert("No hay peticiones pendientes");

            }
        };

        window.setTimeout(checkPendingRequest, 1000);
 });

#4

The $.ajax() function returns a XMLHttpRequest object. Store that in a variable that's accessible from the Submit button's "OnClick" event. When a submit click is processed check to see if the XMLHttpRequest variable is:

函数的作用是:返回一个XMLHttpRequest对象。将其存储在一个可从Submit按钮的“OnClick”事件访问的变量中。处理提交单击时，检查XMLHttpRequest变量是否为:

1) null, meaning that no request has been sent yet

1) null，表示还没有发送任何请求

2) that the readyState value is 4 (Loaded). This means that the request has been sent and returned successfully.

2) readyState值为4(已加载)。这意味着请求已经成功地发送和返回。

In either of those cases, return true and allow the submit to continue. Otherwise return false to block the submit and give the user some indication of why their submit didn't work. :)

在这两种情况下，返回true并允许提交继续。否则，返回false以阻止提交，并向用户说明为什么他们的提交不能工作。:)

#5

We have to utilize $.ajax.abort() method to abort request if the request is active. This promise object uses readyState property to check whether the request is active or not.

如果请求是活动的，我们必须使用$.ajax.abort()方法来中止请求。这个promise对象使用readyState属性来检查请求是否处于活动状态。

HTML

<h3>Cancel Ajax Request on Demand</h3>
<div id="test"></div>
<input type="button" id="btnCancel" value="Click to Cancel the Ajax Request" />

JS Code

JS代码

//Initial Message
var ajaxRequestVariable;
$("#test").html("Please wait while request is being processed..");

//Event handler for Cancel Button
$("#btnCancel").on("click", function(){
if (ajaxRequestVariable !== undefined)

if (ajaxRequestVariable.readyState > 0 && ajaxRequestVariable.readyState < 4)
{
  ajaxRequestVariable.abort();
  $("#test").html("Ajax Request Cancelled.");
}
});

//Ajax Process Starts
ajaxRequestVariable = $.ajax({
            method: "POST",
            url: '/echo/json/',
            contentType: "application/json",
            cache: false,
            dataType: "json",
            data: {
        json: JSON.encode({
         data:
             [
                            {"prop1":"prop1Value"},
                    {"prop1":"prop2Value"}
                  ]         
        }),
        delay: 11
    },

            success: function (response) {
            $("#test").show();
            $("#test").html("Request is completed");           
            },
            error: function (error) {

            },
            complete: function () {

            }
        });

#1