jquery - 是否有特定的 jquery 方法可以在 ajax 加载时执行某些操作？

Question

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

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

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