Question

我有一个打印评论的ajax脚本我想在服务器查询工作时添加加载程序

我需要添加什么才能成功＆＃34;成功＆＃34;为了在我的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;

}

Answer 1

例如

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('');
       }
    });
    });

Answer 2

你可以玩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; 

}

Answer 3

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

   $.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);    
   }
 });

Answer 4

尝试以下代码：

    $.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">");
                },

Answer 5

function 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;

}

将加载器添加到ajax代码中

5 个答案: