Question

我正在尝试在加载数据时显示ajax-loader.gif，并在完全加载数据后隐藏它。

代码update：

 $.ajax({
type: "POST",
dataType: 'json',
url: "api/Employee/GetData",
beforeSend: function () {
    // before send, show the loading gif
    $('#wait').show();
},
success: function (msg) {
    $.getJSON(uri).done(function (data) {

        $.each(msg, function (key, item) {
            // alert(item);
            $('<tr>', { html: formatItem(item) }).appendTo($("#tbdata"));
        });
    });
    /* or simply put here each statement inside callback like so          
     $.each( msg, function (key, item) {
      // alert(item);
      $('<tr>', { html: formatItem(item) }).appendTo($("#tbdata"));
     });
    */
    // or just hide here on success
    $('#wait').hide();
},
complete: function () {
    // or hide here
    // this callback called either success or failed
    $('#wait').hide();
}
}).done(function (data) {
$.each(data, function (key, item) {
    // alert(item);
    $('<tr>', { html: formatItem(item) }).appendTo($("#tbdata"));
});
});

根据一些答案，Ajax具有启动和停止功能，如下所示：

$('#wait').ajaxStart(function() {
$(this).show();
}).ajaxComplete(function() {
$(this).hide();
});

我的问题是如何组合这两个代码以显示和隐藏ajax-loader.gif？

Answer 1

ajaxStart和ajaxComplete应附在文档中。必须注意的是，如果您使用全局启动并且像您一样完成任何ajax调用将受到影响。无论如何你可以这样做：

  $(document).ajaxStart(function() {
     $('#wait').show();
  });
  $(document).ajaxComplete(function() {
    $('#wait').hide();
  });

除此之外，你可以使用beforeSend和complete AJAX setting properties ，恕我直言的后代码比以前的代码更受欢迎，因为后一代码仅影响它请求前者影响了另一个ajax请求，如果你有更多：

$.ajax({
    type: "POST",
    dataType: 'json', 
    url: "api/Employee/GetData",
    beforeSend : function () {  
       // before send, show the loading gif
       $('#wait').show(); 
    },
    success: function ( msg ) { 
      /* or simply put here each statement inside callback like so          
       $.each( msg, function (key, item) {
        // alert(item);
        $('<tr>', { html: formatItem(item) }).appendTo($("#tbdata"));
       });
      */ 
      // or just hide here on success
       $('#wait').hide();
    },
    complete : function () { 
     // or hide here
     // this callback called either success or failed
     $('#wait').hide();
    }
}).done(function (data) {
    $.each(data, function (key, item) {
       // alert(item);
        $('<tr>', { html: formatItem(item) }).appendTo($("#tbdata"));
    });
});

使用Ajax加载图标

1 个答案: