我怎么知道jQuery是否有一个Ajax请求挂起?

我遇到了一些我们所做的jQuery控件的问题。 假设你有一个下拉列表,允许你input你正在寻找的项目的ID,当你按ENTER键或在文本框中失去焦点时,它会通过jQueryvalidation你input的ID是正确的,如果它没有显示警报“T。

问题是,当一个普通用户input一个无效的值,并通过按下提交button失去焦点,jQuery的发布后,返回表单发送。

有什么办法,我可以检查是否有任何asynchronous请求处理的jQuery,以便我不允许表单提交?

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

$.active返回活动Ajax请求的数量。

更多信息在这里

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

$ .ajax()函数返回一个XMLHttpRequest对象。 将其存储在可从提交button的“OnClick”事件访问的variables中。 处理提交点击后,检查XMLHttpRequestvariables是否为:

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

2)readyState的值是4(Loaded)。 这意味着请求已被发送并成功返回。

在这两种情况下,返回true并允许提交继续。 否则返回false来阻止提交,并给用户一些指示为什么他们的提交不起作用。 🙂

这个小提琴使用$ .ajax.abort()方法来中止请求,如果它是活动的。 它使用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 () { } });