我怎么知道jQuery是否有待处理的Ajax请求?


89

我制作的jQuery控件存在一些问题。假设您有一个下拉列表,可让您输入要查找的项目的ID,当您按ENTER键或在文本框中失去焦点时,它会通过jQuery验证您输入的ID是否正确,如果没有输入,则会显示警告没错

问题是,当普通用户在其中输入无效值并通过按下“提交”按钮失去焦点时,在发送了表单的提交后,jQuery帖子将返回。

有什么方法可以检查jQuery是否处理了任何异步请求,从而不允许表单提交?

Answers:


37

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


这对我来说效果更好,因为使用HtmlHelper多次渲染了我的控件。谢谢!
sabanito

这对我有用!我使用的是ajaxSend和ajaxSuccess,但有时我发送了几个ajax请求,而我只想在开始时和结束时运行一次代码。我一直在寻找ajaxStart和ajaxStop!谢谢
ScottyG

2
在2019链接已经过时
克里斯蒂安·尼森


24
 $(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);
 });

似乎是一个好的解决方案,但是,您是否检测到“最大调用堆栈大小”有问题?
Mikel

11

$ .ajax()函数返回XMLHttpRequest对象。将其存储在可通过“提交”按钮的“ OnClick”事件访问的变量中。处理提交单击后,检查XMLHttpRequest变量是否为:

1)为空,表示尚未发送请求

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

在任何一种情况下,返回true并允许提交继续。否则,返回false以阻止提交,并向用户提供一些提示,说明为什么他们的提交不起作用。:)


4
检查null以确定请求对象是否存在很重要,但是如果不为null,则应该真正检查request.readyState > 0 && request.readyState < 4以确定“活动”请求,因为readyState 0指示尽管已创建对象,但尚未启动Web请求。
内森·泰勒

1

如果请求处于活动状态,我们必须使用$ .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代码

//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 () {

            }
        });
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.