Question

我在AJAX调用中使用了一个微调器。我在函数中实现了绑定代码，因此我可以随时使用它并避免某些AJAX调用使用微调器。例如，我有一个用户名和电子邮件存在检查onkeyup，显然我不希望微调器在按下键时显示。

我实现它的方式是有效的，但是如果客户端验证完成，例如在注册页面上触发了ajax调用，并且发回错误，只要密钥是，用户名和电子邮件就会开始显示微调器按下。

以下是代码：

HTML

<div id="spinner" class="spinner hidden">
    <img id="img-spinner" src="<?php echo base_url(); ?>/images/spinner.gif" alt="Loading"/>
</div>

面具功能

    function show_hide_loading_mask() {
        $("#spinner").bind("ajaxSend", function() {
            $(this).show();
            $.blockUI({ message: '' }); //Set message to empty to remove default Loading message and show spinner instead
        }).bind("ajaxStop", function() {
            $(this).hide();
            $.unblockUI();
        }).bind("ajaxError", function() {
            $(this).hide();
            $.unblockUI();
        });
    }

表单提交调用

$('#frmMyForm').submit(function(){
      if (validate()) {
        show_hide_loading_mask();

        $.ajax({
            type: "POST",
            url: "ajax/path",
            data: $('#frmMyForm').serialize(),
            dataType: "json",

            success: function(data){
               if (data.response == "OK") {
                    console.log('OK');
               } else {
                console.log('NOT OK');
               }
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log('Exception...');
            }
        });
    } else {
        console.log('client side validation failed');
    }
    return false; // do not actually submit
  })

验证功能：

function validate() {
    var param1 = $('#txtParam1').val();
    var param2 = $('#txtParam2').val();
    return param1.length >= 5 && param2.length >= 5 //return true when both are at least 5 chars long
}

为什么在去服务器之后会发生这种情况？当有一个ajaxStop时，这应该再次被禁用。

谢谢。

Answer 1

我不确定你应该在微调器的div上绑定ajaxStop事件。

使用.ajaxError()和/或.ajaxComplete()可以完成您要做的事情。

Answer 2

我找到了解决方案。问题是，一旦调用了函数，它就会继续与ajax函数绑定。

通过命名空间ajax函数，可以解决这个问题。我现在有两个功能：

function show_loading_mask() {
    $(document).bind("ajaxStart.showSpinner", function() {
        $('#spinner').show();
        $.blockUI({ message: '' }); //Set message to empty to remove default Loading message and show spinner instead
    });

    $(document).bind("ajaxStop.showSpinner", function() {
        $('#spinner').hide();
        $.unblockUI();
    });

    $(document).bind("ajaxError.showSpinner", function() {
        $('#spinner').hide();
        $.unblockUI();
    });
}

function no_loading_mask() {
    $(document).unbind('.showSpinner');
}

然后在每次ajax调用之前，我相应地调用上面的方法。这样，我只为那些需要的ajax调用显示微调器。

即使没有调用显示它的函数，Ajax微调器也会显示（在有一个ajax调用之后）

2 个答案: