阿贾克斯加载指标

Question

我的这个ajax代码剪切工作正常，但我怎么能显示一个加载图像在一个div。在相同的情况下。

 
$.ajax({ 
     url:'ajax_image_refresher.php?'+$('#frm_text').serialize(), 
     method:'get', 
     success:function(data){ 
     if(data =='') return; 
     img_tag = ''; 
     $('#wapal').html(img_tag); 
     } 

Answer 1

<div id="displayStatus"></div> 

jQuery('#displayStatus').html('Loading'); 

jQuery.ajax({ 
    //options 
    success:function() 
    { 
     //your codes 
     jQuery('#displayStatus').html('Loaded').delay(2000).fadeOut(); 
    } 
}); 

Answer 2

function performAjaxRequest() { 
    // First, put the ajax loading indicator in the div. 
    $("#wapal").append("<img>", { src: "ajaxLoader.gif", className: "loader"}); 

    // Request the new data via ajax. 
    $.ajax({ 
     url: "whatever.wht", 
     method: "get", 
     success: function(data) { 
      // Remove the loading indicator. 
      $("#wapal").find("img.loader").remove(); 

      // Carry on with your function. 
      // ... 
     } 
    }); 
} 

Answer 3

在您定义的success回调可以定义一个beforeSend回调的方式相同。

如果你在你的页面有一个隐藏的图像地方

<div id="loader" style="display: none;" > 
    <img src="/images/my_groovy_ajax_loader.gif" /> 
</div> 

，你可以在succes回调重新设置其visiblitiy在beforeSend方法和隐藏：

$.ajax({ 
    url:'ajax_image_refresher.php?'+$('#frm_text').serialize(), 
    method:'get', 
    beforeSend: function() { 
     $("#loader").show(); 
    } 
    success:function(data) { 
     if(data =='') return; 
     img_tag = ''; 
     $('#wapal').html(img_tag); 
     $("#loader").hide(); 
    } 
}); 

你可以拿请查看jQuery ajax documentation了解更多信息。