0

目前我正在使用这个功能，但它只能刷新整个#comments div。

$.ajax({
   url: 'WebForm1.aspx',
   success: function (data) {
   $("WebForm1.aspx #comments").html(data);
   }
});

我试图弄清楚 jQuery AJAX 是否可以检测到用户正在积极查看网页的内容与来自数据库的内容之间的任何差异，因此每当有人添加评论时，访问者都会看到传入的评论淡入，而不是比整个#comments div 定期刷新。

这是我希望的工作流程：

AJAX 请求 1 -> jquery 获取 Data A 、 Data B 、 Data C 并将它们显示在浏览器的#comments 中，并将其保存在其缓存中。

（稍后将数据 D 添加到数据库中）

AJAX 请求 2 -> jquery 获取 Data A 、 Data B 、 Data C和 Data D，与浏览器上的缓存进行比较，并检测到先前版本的#comments 中不存在 Data D ，并且仅淡入新的 Data D 。

我怎样才能做到这一点？请帮忙。谢谢。

4

2 回答 2

2

jQuery 和 jQuery.ajax 都不能（或意味着）做你所要求的。比较逻辑必须自己做。

我有几个建议：

  1. 为您的数据调用服务器应接受时间戳参数。如果未设置参数，则返回整组注释，包括当前时间的时间戳。如果设置了时间戳参数，则查找从那时起发布的评论，仅发送那些评论，再次带有当前时间的时间戳。来自服务器的时间戳保存在客户端上，并与每个后续请求一起发送。这样，您始终只会收到新评论。将这些新评论附加到屏幕上所需位置和所需动画。
  2. 以上需要相当多的改变。如果您无法执行此操作，请使用您当前的代码。每当加载评论时，在 dom 中搜索具有 data-comment_id 属性的第一个元素。此属性的值是最高的评论 id（假设您不能对评论重新排序，否则您的检查需要更健壮）。在成功回调中，在 data 参数（即 html）中搜索具有 data-comment_id 属性的元素，并丢弃 data-comment_id 值为 1 的元素之后的所有内容，该值高于您目前拥有的最高评论 id。将您留下的 html 附加到带有所需动画的 dom 中。

希望能帮助你走上正轨。

于 2013-11-14T22:09:02.750 回答
0

您将需要某种 setInterval 来不断找出最新评论是什么，并在最新评论的 ID 之后获取新数据

JS

// check every ten seconds
setInterval(function() {

    // figure out most recent comment and pass it to the URL so your query can search for anything greater than newest_comment
    $.ajax({
        url: 'WebForm1.aspx',
        type: 'GET',
        data: {'newest_comment':$('#comments').find('span.comment:eq(0)').data('comment_id')}, // newest_comment would be 5
        dataType: 'HTML',
        success: function (data) {
            $("#comments").prepend(data);
        }
    });

}, 10000);

可能的 HTML

<div id="comments">
    <span class="comment" data-comment_id="5"></span>
    <span class="comment" data-comment_id="4"></span>
    <span class="comment" data-comment_id="3"></span>
    <span class="comment" data-comment_id="2"></span>
    <span class="comment" data-comment_id="1"></span>
</div>
于 2013-11-14T21:34:31.443 回答