javascript - 在ajax成功后动态更新/刷新html而无需重新加载页面

Question

标题

我有一个更新部分，它在页面被调用时首先加载，然后一个定时的 js 函数将再次查找更新，我在一个数组对象中获得了更新；我的问题从这里开始 - 如何动态刷新 html，就像如果我收到 5 个更新，然后我想创建 5 张卡片来显示它们，而目前我只有两张卡片。

<c:forEach items="${updates['updates']}" var="update" varStatus="loopCounter">
<div class="list-group-item media-list">
    <div class="media-body">
        <div class="admin-cont">
        <p>${update.title}</p>
        <p>${update.field1}</p> <p>Designation-${update.field2}</p>
            <p>
                ${update.content}
            </p>
        </div>      
    </div>
</div>
</c:forEach>


<script>
function getUpdates(){          
    $.ajax({
        url : URL,
        type : type,
        data : dataObj,
        success : function(data) {          
            //do something here to refresh and set data in html
        }
    });
}
</script>

Answer 1

在 ajax 调用的成功函数中，您可以执行以下操作:

$('admin-cont').append(data);

引用:http://api.jquery.com/append/

如果你想在插入新数据之前清除div，你可以这样做:

$('admin-cont').empty();

引用:https://api.jquery.com/empty/