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

与定义success回调的方式相同，您可以定义beforeSend回调。

如果您的页面中某处有隐藏的图片

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

您可以在beforeSend方法中设置其可见性并在succes回调中再次隐藏它：

$.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了解更多信息。

Answer 3

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

Ajax加载指标

3 个答案: