我使用以下代码将数据插入到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 SNIPPET
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));
}
答案 0 :(得分:2)
使用.append()代替.html(),以便附加内容而不是覆盖:
$.ajax({
type: "GET",
url: "generate_list.php",
dataType:"json",
cache: false,
success: function(result){
$('#list').html(result.heading); // use html here
$( "<ul></ul>" ).appendTo( "#list" ); // create ul element in #list
$('#list').find("ul").html(result.list); // add list into ul
}
});
答案 1 :(得分:2)
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);
});
答案 2 :(得分:1)
尝试以下方法:
<script type="text/javascript">
$(document).ready(function(){
var list = $('#list');
list.append('<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.children('div').not('.loader').remove();
$(result.heading).insertAfter('.loader');
list.find('ul').empty().append(result.list);
//if result.list is a array you need to use a loop to append each value to the list
//$.each(result.list,function(i,c){list.find('ul').append(v);})
}
});
}, 1000);
});
</script>
答案 3 :(得分:1)
如上所述,您应该使用:
UIView
Html(something)将使用您作为参数传递的内容替换所选标记内的所有内容(当传递参数时,其基本为$('#list').append(result.heading);
),而追加只是将其添加到当前内容。
。.innerHTML="something";
要替换。
html(something)
要添加。
答案 4 :(得分:0)
尝试附加html而不是替换html:
$('#list').append(result.heading);
$('#list').find("ul").html(result.list);