用AJAX响应中的内容替换网页内容

Replace content of a web page with stuff from AJAX response

本文关键字：替换 网页内容 AJAX 响应      更新时间：2023-09-26

我们的想法是用通过ajax调用请求的相同页面替换网页的内容，但只替换不同的HTML元素。

当前，我在$.ajax成功回调中有这个：

var replace = function(first, second){
  $(first.html() !== second.html())
      first.replaceWith(second);
};
replace($('#container'), response.find('#container'));

这是有效的，但因为内容总是被替换，我看到了"剪辑"效果。ajax请求运行多次，几乎每秒一次，直到某个类从ajax响应添加到容器标记中，所以剪辑非常烦人。

基本上，我只想替换具有不同html的元素，但不知何故，从最后一级开始，以防止替换具有相同html代码的元素。

我在这里举了一个小提琴的例子：http://jsfiddle.net/2u4eB/

因此，在该标记中，应该只替换<b>标记的内容，而不是像现在这样替换整个div，因为只有<b>不同。

有人对我如何做到这一点有什么建议吗？

如果你能做出一些假设，那么就不那么难了：

  • 假设1：每次标记都是完全相同的
  • 假设2：唯一改变的是某些html标记中的TEXT

然后您必须知道HTML标记。如果你是一个始终如一的人，那么你所有的动态数据都应该被包装在一个类似的标签中——在你的问题中，你提到了一个<b>标签，所以让我们做第三个假设：

  • 假设3：所有动态数据都用<b>标签包装

那么你所要做的就是：

var replace = function(first, second) {
    var oldValues = first.find('b'),
        newValues = second.find('b');
    oldValues.each(function(i) {
        if(oldValues[i].textContent != newValues[i].textContent) {
            oldValues[i].textContent = newValues[i].textContent;
        }
    });
};
replace($('#container'), response.find('#container'));

注意：这是有效的，因为jQuery的find()按文档顺序返回节点列表，所以假设#1非常重要。

我强烈建议使用支持客户端绑定的框架。（示例包括但不限于Knockout、Handlebars、Angular、Undercore）这将比编写低级别DOM Manipulation更快地获得更好的结果。

Knockout.js和Undercore.js是我的最爱，但也有很多不错的选择。

相关文章：