我怎么知道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 () { } });