Question

我使用以下代码将数据插入到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));
}

Answer 1

使用.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
           }
    });

Answer 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);
});

Answer 3

尝试以下方法：

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

Answer 4

如上所述，您应该使用：

UIView

Html（something）将使用您作为参数传递的内容替换所选标记内的所有内容（当传递参数时，其基本为$('#list').append(result.heading);），而追加只是将其添加到当前内容。

。.innerHTML="something";要替换。 html(something)要添加。

祝你好运。

Answer 5

尝试附加html而不是替换html：

$('#list').append(result.heading);
$('#list').find("ul").html(result.list);

如何在通过ajax插入数据时阻止jquery删除子元素

5 个答案: