Question

在发布此问题之前我一直在阅读，但我还没有找到解决方案。

我有一个包含3个字段（输入类型=“文本”）的表单，其中“blur”事件触发了单独的ajax。（Ajax将检查输入数据的存在）。在表单提交上，我想触发这三个字段的“模糊”事件（因此触发3 ajax），然后如果没有找到错误，则提交将继续。我在检查错误之前使用了jQuery.active变量来知道3个ajax请求是否完整。但它不适用于chrome。

表格：

<form id="theForm">
<input type="text" name="loginname" class="checkIfLoginnameExist" />
<input type="text" name="name" class="checkIfNameExist" />
<input type="test" name="phone" class="checkIfPhoneExist" />
</form>

Ajax：

jQuery('.checkIfLoginnameExist').blur(function() {
var lname = jQuery(this).val().trim();
jQuery.ajax({
url: '<the URL>',
type: 'POST',
cache: false,
data: 'loginname=' + lname,
success: function() {
//--logic, if error found, add a span.validation-error beside the input
},
fail: function() {
--logic
}
});
});

提交逻辑：

jQuery('#theForm').submit(function(e) {
e.preventDefault();
jQuery(this).find('input').each(function() {
jQuery(this).blur(); // ------------ this will trigger the ajax
});

alert('before ' + jQuery.active);
while(jQuery.active > 0) {
    //do nothing
    alert(jQuery.active);
}
alert('after ' + jQuery.active);

//-- check for span.validation-error
//-- return true of false depending on span.validation-error
});

对于IE和FF，代码按预期工作，但在Chrome中，它停留在while（jQuery.active＆gt; 0），因为jQuery.active没有递减，它固定在'3'。

Answer 1

在你的情况下，你似乎在检查错误的东西。您不想知道管道中有多少活动的AJAX请求，而是您需要知道所有AJAX请求是否已完成。在你点击提交的顶部，它会在我眼中暗示你没有任何输入，因此手动运行＆＃34;模糊＆＃34;那里的事件似乎有些过分。我建议你连接输入＆＃39; ajax请求输入本身。

我为你准备了一些清理代码的模型：

var blockSubmit = true;

$( document ).ajaxStop(function() {
  blockSubmit = false;
});

jQuery('#theForm').submit(function(e) {
    e.preventDefault();
    setInterval(function() {
        if (!blockSubmit) {
            //Do something
        }
    }, 200);    
});

jQuery.ajax.active或者jQuery.active在CHROME中没有递减

1 个答案: