Javascript ajax加载gif成功后未删除_Javascript_Php_Jquery_Ajax

Javascript ajax加载gif成功后未删除

javascript php jquery ajax

Javascript ajax加载gif成功后未删除,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我目前有一个表，通过ajax请求加载了一系列结果，您可以看到下面的代码。但是，当我尝试添加加载gif时，我只看到页面上加载的gif，在ajax请求成功后，它不会自行删除我可以看到页面触发ajax请求并返回数据我正在跟踪加载栏，以便在ajax处理时显示，然后在加载时隐藏这是html代码 <div class='content'> <div class='panel panel-flat' id='records_loading'> <ta

我目前有一个表，通过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>

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


短信ID
时间戳
手机号码
消息
消息状态

这是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>


函数showResult（str）{
$.ajax({
url:'/getjson.php？search='+str，
键入：“POST”，
数据类型：'json'，
发送前：功能（响应）
{
$（“#记录#加载”）.html（“”）；
},
成功：功能（响应）
{
var trHTML=''；
$。每个（响应、功能（键、值）{
trHTML+=
''+value.ID+
''+值。时间戳+
''+值.数字+
''+值。消息+
''+值.状态+
'';     
});
$（“#记录"表“）.html（trHTML）；
$（'.table togglable'）.trigger（'footable_redraw'）；
}
}); 
}
显示结果（“”）；
成功：功能（响应）
{
$（“#记录#加载”）.html（“”）；
}
成功：功能（响应）
{
$（“#记录#加载”）.html（“”）；
}
为了更好的用户体验和显示，您可以尝试以下方法：
html://在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>

<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>


函数showResult（str）{
$（“#加载程序”）.fadeIn（）；
$.ajax({
url:'/getjson.php？search='+str，
键入：“POST”，
数据类型：'json'，
成功：功能（响应）
{
var trHTML=''；
$。每个（响应、功能（键、值）{
trHTML+=
''+value.ID+
''+值。时间戳+
''+值.数字+
''+值。消息+
''+值.状态+
'';     
});
$（“#记录"表“）.html（trHTML）；
$（'.table togglable'）.trigger（'footable_redraw'）；
}
});   
$（“#加载程序”）.fadeOut（）；
}
显示结果（“”）；
为了更好的用户体验和显示，您可以尝试以下方法：
html://在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>

<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>


函数showResult（str）{
$（“#加载程序”）.fadeIn（）；
$.ajax({
url:'/getjson.php？search='+str，
键入：“POST”，
数据类型：'json'，
成功：功能（响应）
{
var trHTML=''；
$。每个（响应、功能（键、值）{
trHTML+=
''+value.ID+
''+值。时间戳+
''+值.数字+
''+值。消息+
''+值.状态+
'';     
});
$（“#记录"表“）.html（trHTML）；
$（'.table togglable'）.trigger（'footable_redraw'）；
}
});   
$（“#加载程序”）.fadeOut（）；
}
显示结果（“”）；
只有一个更改。
使用
$（'#记录_表'）.html（''）；

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

$（'#记录加载'）.html（''；

最终代码：
<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>


函数showResult（str）{
$.ajax({
url:'/getjson.php？search='+str，
键入：“POST”，
数据类型：'json'，
发送前：功能（响应）
{
$（'#records_table'）.html（''）；
$（“#记录_加载thead.bg teal”）.hide（）；
},
成功：功能（响应）
{
var trHTML=''；
$。每个（响应、功能（键、值）{
trHTML+=
''+value.ID+
''+值。时间戳+
''+值.数字+
''+值。消息+
''+值.状态+
'';     
});
$（“#记录_加载thead.bg teal”）.show（）；
$（“#记录"表“）.html（trHTML）；
$（'.table togglable'）.trigger（'footable_redraw'）；
}
}); 
}
显示结果（“”）；
只有一个更改。
使用
$（'#记录_表'）.html（''）；

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

$（'#记录加载'）.html（''；

最终代码：
<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>


函数showResult（str）{
$.ajax({
url:'/getjson.php？search='+str，
键入：“POST”，
数据类型：'json'，
发送前：功能（响应）
{
$（'#records_table'）.html（''）；
$（“#记录_加载thead.bg teal”）.hide（）；
},
成功：功能（响应）
{
var trHTML=''；
$。每个（响应、功能（键、值）{
trHTML+=
''+value.ID+
''+值。时间戳+
''+值.数字+
''+值。消息+
''+值.状态+
'';     
});
$（“#记录_加载thead.bg teal”）.show（）；
$（“#记录"表“）.html（trHTML）；
$（'.table togglable'）.trigger（'footable_redraw'）；
}
}); 
}
显示结果（“”）；
我没有看到成功删除加载.gif的代码。
要显示在发送前函数中编写的gif片段，您可以编写一段代码，在成功后删除gif。以下代码段将清空记录\u加载
容器
$('#records_loading').empty();

我没有看到任何代码在成功后删除load.gif。
要显示您在发送之前在函数中编写的gif片段，您可以向