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

$(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 2

在文档中的某处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 3

嗯，首先你需要制作你想要的任何图像叠加。这只是CSS / HTML，直到您的演示文稿。但这是一种方法：

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

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

Answer 4

在调用Ajax之前使用show loading指示符并在成功或错误情况后隐藏它，或者您可以使用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
  })

当ajax正在工作时显示加载程序

6 个答案: