ajax 工作时显示加载器

Question

我想在我的 AJAX 请求工作时显示全屏加载程序。我怎样才能做到这一点？

$("#send").click(function() {
    if ($("#ccval").val() == $("#contactcaptcha").text()) {
        var id = $("#contactcaptcha").attr("data-id");
        var cemail = $("#cemail").val();

        $.post(base_url + "index.php/myad/getphonenumber", {
            uniqueid: id,
            emailaddress: cemail
        }, function() {
            alert('email is sent');
        })
    } else {
        $("#ccval").val("");
        $("#ccval").attr("placeholder", "invalid captcha");
    }
})
});

Answer 1

在文档中的某处有一个div#ajax-loader 并设置它的样式：

/* You can style this further - this is just an example */
#ajax-loader {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding-top: 35%;
    display: none;
}

并将其放在您的文档中：

<div id="ajax-loader">Loading content...</div>

现在，将您的 jQuery 代码更改为：

$("#send").click(function() {
    if ($("#ccval").val() == $("#contactcaptcha").text()) {
        var id = $("#contactcaptcha").attr("data-id");
        var cemail = $("#cemail").val();

        // notice this line
        $('#ajax-loader').show();
        // this will set display: none; -> display: block; for this element

        $.post(base_url + "index.php/myad/getphonenumber", {
            uniqueid: id,
            emailaddress: cemail
        }, function() {
            alert('email is sent');

            // notice this line too
            $('#ajax-loader').hide();
            // just toggle the view vice-versa...
        })
    } else {
        $("#ccval").val("");
        $("#ccval").attr("placeholder", "invalid captcha");
    }
});

---

编辑：另外，强烈建议在下面由 Kev 发布答案。

Answer 2

$(function () {
    $(document).ajaxStart(function () {
        $("#Loader").show();
    });

    $(document).ajaxStop(function () {
        $("#Loader").hide();       
    });

    $(document).ajaxError(function () {
        $("#Loader").hide();       
    }); 
});

其他答案要求您为每个 ajax 调用复制显示/隐藏代码。如果您只有 1 个调用，这很好，但我假设您的应用中有多个调用。

我上面的代码将在所有 ajax 请求期间显示您的加载程序。我建议将其添加到您的布局页面中，或者将其放在一个普通的 js 文件中。

#Loader 由您决定。在我的站点中，我将其设置为带有居中进度条的固定位置元素。以下是一些您可以作为起点的基本样式。

#Loader {
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    background-color: #fff;
    opacity: 0.6;
    z-index: 99999;
}

Answer 3

好吧，首先你需要制作你想要的任何图像叠加层。这只是 CSS/HTML 和您的演示文稿。但这里有一种方法：

$(trigger).on('whatever', function(){ 
...
   $(loading_selector).show()
   $.ajax({ ..., 
            success:function(data) { 
               $(loading_selector).hide();
                  }
            });
 });

这里的问题是，如果您的 ajax 失败，加载选择器不会隐藏，因此您需要添加一些代码来捕获 ajax 错误并在该逻辑块中隐藏加载窗格。

Answer 4

在调用 Ajax 之前使用显示加载指示器并在成功或错误情况后隐藏它，或者您可以使用 jQuery ajax 的完整处理程序

    $("#send").click(function() {
   if ($("#ccval").val() == $("#contactcaptcha").text()) {
    var id = $("#contactcaptcha").attr("data-id");
    var cemail = $("#cemail").val();
    //Start showing loading indicator
    showLoadingIndicator();
    $.post(base_url + "index.php/myad/getphonenumber", {
        uniqueid: id,
        emailaddress: cemail
    }, function() {
        hideLoadingIndicator();
        alert('email is sent');
    })
} else {
    hideLoadingIndicator();
    $("#ccval").val("");
    $("#ccval").attr("placeholder", "invalid captcha");
}})});

Answer 5

在请求发送前显示，完成后隐藏。

$('#loader').show();
$.post('example.php', function() {
    alert('success');
}).always(function() {
    alert('finished');
    $('#loader').hide();
});

Answer 6

我认为使用 $.ajax 会更容易：

$.ajax({
  url: base_url + "index.php/myad/getphonenumber",
  beforeSend: function(xhr){
     //show load },
  data: { uniqueid: id, emailaddress: cemail }
  }).done(function(d){
    alert('email is sent');
  }).always(function(){
     //remove load
  })