将loader添加到ajax代码中 - add loader to ajax code

add loader to ajax code

本文关键字：代码 ajax loader 添加 | 更新日期: 2023-09-27

我有打印注释的ajax脚本我想在服务器查询工作时添加加载器

为了在我的html页面中看到LOADER，我需要在"成功"中添加什么？

function printComments (obj) {
    var element = $(obj);
    var contactID = element.attr("contactID");
    var type = element.attr("id");
    var info = 'contactID=' + contactID + "&type=" + type + "&catID=" + catID;
    $("#loader").html('<img src="images/loading.gif" align="absmiddle">');
//  alert(info);

     $.ajax({
        type: "POST",
        url: "ajax/followPrint.php",
        data: info,
        success: function(msg){

            if (type == "followsTab")
                $("#follows").html(msg);
            if (type == "commentsTab")
                $("#commentsContent").html(msg);    
       }
     });
    return false;
}

您可以只玩hide（）和show（），比如

function printComments (obj) {
    var element = $(obj);
    var contactID = element.attr("contactID");
    var type = element.attr("id");
    var info = 'contactID=' + contactID + "&type=" + type + "&catID=" + catID;
    $("#loader").show(); // displaying loader here

     $.ajax({
        type: "POST",
        url: "ajax/followPrint.php",
        data: info,
        success: function(msg){
            if (type == "followsTab")
                $("#follows").html(msg);
            if (type == "commentsTab")
                $("#commentsContent").html(msg);    
             $("#loader").hide(); // hiding loader here
           }
     });
    //return false; 
}

示例

HTML
<a href="#" id="verification" >test</a>
<img src="example_preloader.gif" id="ajaxPreloader" style="display:none" />

JS-

$('#verification').click(function() {
    $('#ajaxPreloader').toggle();
    $.ajax({
       type     : "POST",
       url      : "example url",
       data     : {'exampleData': ''},
       success : function(msg) {
        $('#ajaxPreloader').text('');
        location.reload();
       },
       error:    function(error) {
        $('#ajaxPreloader').text('');
       }
    });
    });

使用beforeSend显示加载程序，然后在successs函数中隐藏该加载程序

   $.ajax({
    type: "POST",
    url: "ajax/followPrint.php",
    data: info,
    beforeSend:function(){
      $("#loader").show();
     },
    success: function(msg){
        $("#loader").hide();
        if (type == "followsTab")
            $("#follows").html(msg);
        if (type == "commentsTab")
            $("#commentsContent").html(msg);    
   }
 });

尝试以下代码：

    $.ajax({
        type: "POST",
        url: "ajax/followPrint.php",
        data: info,
        **beforeSend: function() {
            $("#loader").html("<img src="images/loading.gif" align="absmiddle">");
            },**
        success: function(msg){    
             $('#loader').hide();
            if (type == "followsTab")
                $("#follows").html(msg);
            if (type == "commentsTab")
                $("#commentsContent").html(msg);    
       }
     });

额外添加了这行代码：

beforeSend: function() {
                $("#loader").html("<img src="images/loading.gif" align="absmiddle">");
                },

函数printComments（obj）｛

var element = $(obj);
var contactID = element.attr("contactID");
var type = element.attr("id");
var info = 'contactID=' + contactID + "&type=" + type + "&catID=" + catID;
$("#follows").html('<img src="images/loading.gif" align="absmiddle">');
$("#commentsContent").html('<img src="images/loading.gif" align="absmiddle">');

//当服务器查询工作时，加载程序将隐藏被输出替换的

 $.ajax({
    type: "POST",
    url: "ajax/followPrint.php",
    data: info,
    success: function(msg){

        if (type == "followsTab")
            $("#follows").html(msg);
        if (type == "commentsTab")
            $("#commentsContent").html(msg);    
   }
 });
return false;

}