Ajax 注释插入 LI 还是替换 UL？

Question

我正在使用我的评论功能，并且正在两种策略之间进行选择。我的评论列表是一个无序列表。

1. 将 DOM 中的 UL 替换为响应中的 UL。
2. 将响应中的最后一个 LI 插入到 DOM 中的 UL 中。

第一个选项更简单，但我觉得这不是最好或正确的方法。 如果我想使用第二个选项，如果同时发布了多个评论，我如何知道响应中的哪些评论比 DOM 中的评论新？

想法？

Answer 1

您可以将时间戳保留为变量以供 JS 引用。

当您加载页面时，您的服务器端语言会将要加载的最后一条评论的时间戳分配给 JavaScript 变量。从那时起，每次您加载更多评论时，请发送您请求的最后一个时间戳。您的服务器端语言将检查比该时间戳更新的评论。确保在发送更多请求时更新时间戳。通过将其作为响应的一部分发送或跟踪发送请求的时间。

Answer 2

我会选择选项 1。它实施起来要简单得多，而且实际上执行速度可能更快。但请确保没有任何事件处理程序绑定到 LI - 它们将在之后停止工作您更新其父 UL。使用委托来避免这种情况。

Answer 3

假设你的无序列表是这样的：

<ul id="commentsList">
<li>Comment 1</li>
</ul>

在 javascript 中你会写：

$.ajax({
  url: "the ajax url",
  type: "GET",
  data: {//whatever data},
  success: function(r){
    //Assuming r contains the comment. 
    //(Don't send html as the response but just the comment text
    $("#commentsList").append("<li>" + r + "<li>");
  }
});

Answer 4

您应该在评论的 UL 后面附加最新的 LI。 为什么？您不必获取所有完整的 UL 列表并替换旧的列表。减少必须进行的更改。只需获取最新的 LI 并将其附加到最后即可。 更少的工作更高效

到目前为止，您的问题是关于如何知道哪一条是最新评论。当评论存储在数据库中时存储时间戳。在第一次获取评论的同时，尝试分配保存最后一项的时间戳的变量，然后在数据库中搜索大于您存储的时间戳的所有内容后，获取列表并附加它们，然后更新变量，再次使用最新的时间戳。