Ajax 加载 GIF 不会在成功时删除 - ajax load gif not removing on success

我目前有一个表，它通过 ajax 请求加载一堆结果，您可以看到下面的代码。但是，当我尝试添加加载 GIF 时，我只在页面上看到加载 GIF，它在 Ajax 请求被终止后不会自行删除

我可以看到页面触发了 ajax 请求并返回数据

我正在追逐加载栏以在 ajax 处理时显示，然后在加载时隐藏

这是 HTML 代码

<div class='content'>
    <div class='panel panel-flat' id='records_loading'>
        <table class='table table-togglable table-hover table-striped' data-limit-navigation='5' data-page-size='20'>
            <thead class='bg-teal'>
                <tr>
                    <th data-toggle='true' data-type='numeric'>SMS ID</th>
                    <th data-hide='phone'>Time Stamp</th>
                    <th data-hide='phone,tablet'>Mobile Number</th>
                    <th data-hide='phone,tablet'>Message</th>
                    <th data-hide='phone,tablet'>Message Status</th>
                </tr>
            </thead>
            <tbody  id='records_table'>
            </tbody>
        </table>
    </div>
<ul class='pagination pagination-separated hide-if-no-paging'></ul>
</div>

这是 AJAX 代码

<script>
function showResult(str) {  
    $.ajax({
        url: '/getjson.php?search='+str, 
        type: 'POST',    
        dataType:'json',
        beforeSend:function(response)
       {
        $('#records_loading').html('<img src="assets/content/login.gif">');
       },
        success: function (response) 
        {
          var trHTML = '';
          $.each(response, function (key,value) {
             trHTML += 
                '<tr><td>' + value.ID + 
                '</td><td>' + value.Timestamp + 
                '</td><td>' + value.Number + 
                '</td><td>' + value.Message + 
                '</td><td>' + value.Status + 
                '</td></tr>';     
          });
            $('#records_table').html(trHTML);
            $('.table-togglable').trigger('footable_redraw');
        }
    }); 
}
showResult('');
</script>

    success: function (response) 
    {
       $('#records_loading').html('<table class='table table-togglable table-hover table-striped' data-limit-navigation='5' data-page-size='20'><thead class='bg-teal'>');
    }

您可以尝试这样做以获得更好的用户体验和显示：

html：//在 HTML 代码中的任何位置添加以下代码

<img src="assets/content/login.gif" id="loader" style="display:none;position:fixed;z-index:9999;top:50%;left:50%;">

JavaScript：

<script>
function showResult(str) {  
    $("#loader").fadeIn();
    $.ajax({
    url: '/getjson.php?search='+str, 
    type: 'POST',    
    dataType:'json',
    success: function (response) 
    {
      var trHTML = '';
      $.each(response, function (key,value) {
         trHTML += 
        '<tr><td>' + value.ID + 
        '</td><td>' + value.Timestamp + 
        '</td><td>' + value.Number + 
        '</td><td>' + value.Message + 
        '</td><td>' + value.Status + 
        '</td></tr>';     
      });
        $('#records_table').html(trHTML);
        $('.table-togglable').trigger('footable_redraw');
    }
    });   
    $("#loader").fadeOut();
}
showResult('');
</script>

只有一个变化。

用

$('#records_table').html('<img src="assets/content/login.gif">');

而不是

$('#records_loading').html('<img src="assets/content/login.gif">');

最终代码：

<script>
function showResult(str) {  
    $.ajax({
        url: '/getjson.php?search='+str, 
        type: 'POST',    
        dataType:'json',
        beforeSend:function(response)
       {
        $('#records_table').html('<img src="assets/content/login.gif">');
        $('#records_loading thead.bg-teal').hide();
       },
        success: function (response) 
        {
          var trHTML = '';
          $.each(response, function (key,value) {
             trHTML += 
                '<tr><td>' + value.ID + 
                '</td><td>' + value.Timestamp + 
                '</td><td>' + value.Number + 
                '</td><td>' + value.Message + 
                '</td><td>' + value.Status + 
                '</td></tr>';     
          });
            $('#records_loading thead.bg-teal').show();
            $('#records_table').html(trHTML);
            $('.table-togglable').trigger('footable_redraw');
        }
    }); 
}
showResult('');
</script>

我没有看到任何代码可以在成功时删除loading.gif。喜欢显示您在函数中编写的片段beforeSend gif，您可以编写代码以在成功时删除 gif。以下代码片段将清空record_loading容器

$('#records_loading').empty();