ajax加载gif不能删除成功

问题描述：

我目前有一个表，通过ajax请求加载一堆结果，你可以看到下面的代码。然而，当我尝试添加一个加载gif我只看到页面加载gif它不会自己删除后，ajax请求是suscessfullajax加载gif不能删除成功

我可以看到页火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>

_“它不会删除自身” _它不会删除自己，就像你不得不加它，你有VAR trHTML后做去除 –

='';放$（'＃records_table'）。html（''）; – jeff

@jeff，他们为什么需要这样做？ ''（'＃records_table'）。html（trHTML）;'会清除当前元素中的任何文本/ html，并将其替换为任何'trHTML'持有 –

答

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>

这个工作，但它仍然显示表头，如果可能我希望它隐藏表头，直到其加载 – Nathan

我已更新我的代码。现在检查。 –

答

我没有看到任何代码就成功取出loading.gif。想要显示您在beforeSend函数中编写了一个片段的gif，您可以编写代码来成功删除gif。下面的代码片段将清空record_loading容器

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

ajax加载gif不能删除成功

相关推荐