调用ajax时加载图像仅显示一次

Question

我是初学者。 我尝试在通过此代码获取数据时创建加载图像。

$('#loading-image').ajaxStart(function () {
      $(this).fadeIn('fast');
      console.log("1st call");
}).ajaxStop(function () {
      $(this).stop().fadeOut('fast');
});

所以我在

中创建图像

<div id="loading-image" style="display:none"><img src="img/loading_img.gif"></div>

图片只显示了这个 ajax 调用

 $('#select_company').change(function(){
        if(this.value!="")
        {                 
                    $.ajax({
                        url: "get_list.php",
                        async: true,
                        dataType: "json",
                        type: "post",
                        data: {
                            "select_company": $("#select_company").val(),
                            "get_list": "div"
                        },
                        success: function (data) {
                            $('#myTable').empty();
                            clear_list('div','Select Division');  

                            if(data!=null){                                 
                              $.each(data, function(key, value) {   
                                        $('#select_div')
                                       .append($("<option></option>")
                                       .attr("value",value)
                                       .text(key)); 
                              });

                            }
                        }
                    });

        }
        else
        {
          clear_list('div','Select Division');  

        } 
  });

但是当我从这个函数调用数据时它不显示加载图像

    function getSubData(prodId,stationID) {
    var data_return = null;

    $.ajax({
            url: "get_sub_data.php",
            async: false,
            type: "post",
            dataType: "json",
            data: {
                    "ProdID": prodId,
                    "StationID": stationID
                  },
                  success: function(res, textStatus, jqXHR) {
                      data_return = res;
                      console.log(data_return);

                  },

          });
    return data_return;
    }

我该怎么办。我尝试了另一种方法来创建图像加载这样的添加

$("#loading").show(); 

在调用 ajax 之前函数后的第一行，并在 ajax 成功后隐藏图像。它仅适用于我所说的第一个功能。

加法。它可能会受到我的代码调用 ajax 这样的影响

function createTable(data,columnTable){

    var content = '<table border="1" cellspacing="0" class="table table-bordered"><thead><tr><th>No.</th><th>Job</th><th>Lot</th><th>จำนวน (Plan)</th><th>จำนวน (Actual)</th>';
    for(var i = 0 ; i< (columnTable.length) ; i++){

      if(i == (columnTable.length)-1){
        subColToExcel += columnTable[i];
      }else{
        subColToExcel += columnTable[i]+",";
      }

      content += '<th>'+columnTable[i]+'</th>';

    };

    content+= '</tr></thead><tbody>';

    for(var i = 0 ; i< (data.length) ; i++){
      var number = i+1;
      var strData = '';
      content += '<tr>';
      content += '<td align="center">'+number+'</td>';
      for (var j = 1; j < data[i].length ; j++){
          var item = data[i];      
          strData += item[j]+",";        
          content += '<td align="center">'+item[j]+'</td>';
      }


      var subData = getSubData(data[i][0],columnTable);

      for (var z=0; z < (columnTable.length) ; z++ ){

          if(z == (columnTable.length)-1){
            strData += subData[z];
          }else{
            strData += subData[z]+",";
          }

          if(subData[z]==' - '){
            content += '<td bgcolor="#808080" align="center">'+subData[z]+'</td>';
          }else{
            content += '<td align="center">'+subData[z]+'</td>';
          }

      }

      if(i == (data.length)-1){
        dataToExcel += strData;
      }
      else{
        dataToExcel += strData+"///"; 
      }

      content += '</tr>';
    }
    content += '</tbody></table>';
    // console.log(dataToExcel);
    document.getElementById("myTable").innerHTML = content;


  }

当用户点击按钮时，表格将创建如下

 function clickShowReport()
  {                       

      data_backup = getAjaxData();
      column_table = getColumn();

      if($("#select_div").val() == ''){
        alert("Please select division");
      }
      else{
        if(data_backup.length == 0||data_backup[0].length==0)
        {
            show_error();
            data_backup = null;

        } else 
        {

            createTable(data_backup,column_table);

        }  

      } 

  }

在 getSubData 函数、getAjaxData 函数和 getColumnFunction 中 ajax 调用数据时，图像不显示。

Answer 1

应该是$(document).ajaxStart 而不是$('#loading-image')

$(document).ajaxStart(function () {
      $('#loading-image').fadeIn('fast');
      console.log("1st call");
}).ajaxStop(function () {
      $('#loading-image').stop().fadeOut('fast');
});

我强烈认为不需要.stop()。在您的情况下，只需 fadeIn 和 fadeOut 就可以了。尝试删除一次。在这里可能无关紧要

Answer 2

你必须在你的代码中做两件事：

1. 在jQuery.ajax()方法中使用global:false和
2. $(document).ajaxStart()/.ajaxStop() 您只能委托给文档。

---

 $.ajax({
    url: "get_sub_data.php",
    async: false,
    global:false, //<-----use here to exclude
    type: "post",
 });

这必须改变如下：

$(document).ajaxStart(function () {
      $('#loading-image').fadeIn('fast');
      console.log("1st call");
}).ajaxStop(function () {
      $('#loading-image').stop().fadeOut('fast');
});

---

或者还有另一种方式，例如：

1.) 创建两个方法：

var app = app || {};

app.ajaxstart = function(){
    $('#loading-image').fadeIn('fast');
};
app.ajaxstop = function(){
    $('#loading-image').stop().fadeOut('fast');
};

2.) 现在您可以在任何需要的地方使用这两种方法：

$.ajax({
   url: "",
   type: "",
   beforeSend : app.ajaxstart, //<----use it here before execution
   success:function(){},
   error:function(){},
   complete:app.ajaxstop //<---use it here to remove whether ajax has success or error.
});