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

您也可以在需要时使用命名空间绑定和取消绑定ajaxStart和AjaxStop事件。这已经在这里解释了：

How to call .ajaxStart() on specific ajax calls

global ajax停止并形成onSuccess函数

1 个答案: