使用jQuery Ajax时最简单的显示“加载中”的方法是什么？

Question

我希望了解展示“加载”gif到特定jquery ajax请求的最简单方法。

我已经尝试过以下方法：

$(document).ajaxStart(function() {
    $('.hideOnLoad').hide();
});
$(document).ajaxStop(function() {
    $('.hideOnLoad').show();
});

但是所有的ajax请求都会触发它。我只想让特定的jquery ajax请求触发加载过程（可能会显示一个gif）。

我该怎么做？

- ajsie

Answer 1

在beforeSend回调函数中，您需要显示旋转图标，在complete回调函数中，您需要隐藏它。顺便提一下：ajaxStart和ajaxStop是全局的ajax事件，而beforeSend和complete是本地的。

- Teja Kantamneni

---

在 jQuery 的在线文档中，我在哪里可以阅读 beforeSend 和 complete？我找不到它。 - ajsie

Answer 2

在发起ajax调用之前，先显示图像，然后在您的ajax“success”或“complete”处理程序中隐藏它。

- Pointy

Answer 3

我通常会做类似这样的事情

$('#someTrigger').click( function(el) {
    // do my ajax request with callback, onComplete
    $('.someImageClass').show();
});

function onComplete(resp, respText, XMLHttpRequset) {
    // do stuff
    $('.someImageClass').hide();
}

- sberry

Answer 4

将容器的内容设置为gif图像。然后进行Ajax调用。gif图像将在Ajax回调函数中被移除。

- Carlos Blanco

Answer 5

我倾向于做类似以下的事情：

$('#some-div').addClass('loading');

当我开始时

$('#some-div').removeClass('loading');

当我完成时。然后我有

#some-div { 
    background: transparent url('ajazz-loader.gif') no-repeat center center; 
}

在我的 CSS 中。简洁明了。

- AndyFlan