Question

我有一个评论系统，如果你提交评论，它会通过ajax附加到#comment div。我希望在页面等待请求完成时显示“loader”spinner gif。在这一点上，我设法做的是在#load的末尾添加一个#comments 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!!
});

Answer 2

不，jquery中没有内置任何这样的方法。

如果您出于某种原因真的讨厌自己的方法，并且如果您使用jquery提交评论，则可以执行以下操作：

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

然后在ajax请求中：

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

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

在加载ajax时是否有一个特定的jquery方法来做某事？

2 个答案: