加载 ajax 时是否有特定的 jquery 方法可以做某事？答案

【问题标题】：Is there a specific jquery method for doing something while ajax is loading?加载 ajax 时是否有特定的 jquery 方法可以做某事？
【发布时间】：2015-02-12 06:00:41
【问题描述】：

我有一个评论系统，如果您提交评论，它会通过 ajax 附加到#comment div。我希望在页面等待请求完成时显示“加载器”微调器 gif。在这一点上，我设法做的是在#comments 的末尾添加一个#load div，其中包含微调器。使用 jquery，我立即隐藏了#load。单击“发表评论”按钮时，#load 会显示 jquery，然后我的 ajax 请求包含再次隐藏它的代码。这样，当我提交评论时，微调器显示，并在 ajax 最终到达并显示评论时消失。

但我的方法似乎很迂回。我觉得必须有一个更简单的解决方案，一些内置在 jquery 中的方法。有吗？

【问题讨论】：

设置背景有spinner.gif？另外，看看 beforeSend?
请在您的问题中添加相关代码
我不相信有任何内置的东西可以自动完成。您只需使用“完成”回调来隐藏微调器，或将其移除或其他任何方式。
我就是这样做的，除了在原始页面上包含#load div 包含style="display:none"。不过，有一种方法可以使用 jQuery 跟踪进度，您可以在此处查看示例：pastebin.com/tws8Q9ud

标签： jquery ajax

【解决方案1】：

您可以将 ajaxStart() 和 ajaxStop() 附加到您的加载 div。每次 ajax 调用都会触发这些函数。

$('#loading').hide().ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
 });

如果您计划在 ajax 调用之前显示加载 div 并在成功期间隐藏它，请注意并非每个 ajax 请求都会成功结束。它可能会超时，然后您的加载 div 将保持可见。最好将微调器隐藏在always() 函数中：

$('#loading').show() //show spinner
$.ajax({
    url: '/path/to/file',
    type: 'GET',
    data: {param1: 'value1'},
})
.done(function() {
    console.log("success");
})
.fail(function() {
    console.log("error");
})
.always(function() {
    console.log("complete");
    $('#loading').hide();//hide your spinner here!!
});

【讨论】：

警告：页面上的每个 ajax 调用都会调用此方法，即使您希望在幕后运行一个 ajax 调用，例如触发将一堆图像加载到您的 dom。
是的，ajaxSend() 和 ajaxComplete() 可能是更好的选择
为什么每次ajax请求都不能成功结束？
就像我说的，一个请求可能由于多种原因而超时。例如服务器离线或无法响应。

【解决方案2】：

不，jquery 中没有内置任何此类方法。

如果你真的因为某种原因讨厌你的方法，并且如果你使用 jquery 来提交评论，你可以这样做：

$("#comments").append("<div id="loading">loading...</div>");
//submit comment

然后在ajax请求中：

$("#loading").remove();
//append the comment

但老实说，您的解决方案似乎更简洁。这只是另一种选择。您想使用内置 jquery 方法是否有特定原因？

【讨论】：