我正在使用以下代码将数据插入html结构,但仅显示以下内容之一。在我看来,当我通过Ajax插入数据时,那个子元素就被删除了。该怎么做,以至于我不需要改变结构?

JS

<script type="text/javascript">
$(document).ready(function(){
    $("#list").html('<div id="loader"><i class="fa fa-refresh fa-fw fa-5x fa-spin" aria-hidden="true"></i><br>Waiting...</div>');
    setInterval(function(){
        $.ajax({
               type: "GET",
               url: "generate_list.php",
               dataType:"json",
               cache: false,
               success: function(result){
                     $('#list').html(result.heading);
                     $('#list ul').html(result.list);
               }
        });
    }, 1000);
});
</script>


的HTML

<div id="list">
    <ul>
    </ul>
</div>


PHP片段

if($count > 0){
    echo json_encode(array('heading' => '<div id="found">Here is all!</div>', 'list' => $thelist));
}
else{
    echo json_encode(array('heading' => '<div id="empty_storage"><img src="icon.png"><br>Its lonely here!</div>', 'list' => $thelist));
}

最佳答案

ajax回调不是删除html的内容(尽管如果它仍然存在的话),则是第一行:

$("#list").html('<div id="loader"><i class="fa fa-refresh fa-fw fa-5x fa-spin" aria-hidden="true"></i><br>Waiting...</div>');


实际上是从<ul>元素中删除#list ...如果您重新添加它,那很好。假设results.headingh1标记(或类似标记),并且results.list是一堆li元素,则您的Ajax回调可能如下所示:

$('#list').html(result.heading);
$('#list').append($('<ul>').append(result.list));




另外:如果您希望加载程序在每个间隔之间显示...,您可以执行此操作(或类似的操作,具体取决于它的外观-在更新列表时,将加载程序图标放在列表的底部):

$(document).ready(function(){
    var $list = $('#list');
    setInterval(function(){
        $list.append('<div id="loader"><i class="fa fa-refresh fa-fw fa-5x fa-spin" aria-hidden="true"></i><br>Waiting...</div>');
        $.ajax({
               type: "GET",
               url: "generate_list.php",
               dataType:"json",
               cache: false,
               success: function(result){
                     $list.html(result.heading);
                     $list.append($('<ul>').append(result.list));
               }
        });
    }, 1000);
});

10-05 20:40
查看更多