javascript - 全局 ajaxStop 和表单 onSuccess 函数

Question

我有一个显示加载微调器的代码:

 $(document)
   .ajaxStart(function () {
       var indicator = $('#busyIndicator');
       indicator.show();
    })
    .ajaxStop(function () {
       var indicator = $('#busyIndicator');
       indicator.hide();
 })

我有一个函数在表单成功时触发:

 function onSuccess() {     
    $('#busyIndicator').show();
 }

这是html(省略了一些代码和属性):

<div id="busyIndicator" style="display: none;">
        <img alt="" src="/Images/Animation/steamtrain.gif">
</div>
<form method="post" id="createForm" data-ajax-success="onSuccess" data-ajax-method="POST"  data-ajax="true">...</form>

调用了onSuccess函数，但图像不可见。我尝试在此行之后插入 debugger:

$('#busyIndicator').show();

在这种情况下，图像是可见的。我认为问题在于 ajaxStop 在 onSuccess 之后触发。我只能在 onSuccess 函数中更改代码。怎么解决？

Answer 1

如果您想要一个不使用全局 ajaxStart 和 ajaxStop 的 ajax 调用。您需要在 ajax 调用中将其指定为选项。只需将全局设置为 false 即可。

$.ajax({
    url: '/path/to/file',
    type: 'default GET (Other values: POST)',
    dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
    data: {param1: 'value1'},
    global: false    // this disables the global ajaxStart and ajaxStop events.
})
.done(function(response) {
    console.log("success");
    //do something on success
})
.fail(function(error) {
    console.log("error");
    //do something on error
})
.always(function() {
    console.log("complete");
    //this will be done always unrelated to succes or error
});

您还可以在需要时使用命名空间来绑定(bind)和取消绑定(bind) ajaxStart 和 AjaxStop 事件。这已经在这里解释过:

How to call .ajaxStart() on specific ajax calls