我正在使用以下代码将数据插入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.heading
是h1
标记(或类似标记),并且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);
});