动态替换 div 容器内的数据答案

【问题标题】：Dynamically replace data inside a div container动态替换 div 容器内的数据
【发布时间】：2015-10-04 08:56:48
【问题描述】：

在 DIV 容器中动态加载数据的最佳方式是什么？

假设我在一个页面上有许多图片。单击图片会在屏幕上打开一个 DIV 容器（无页面刷新），其中包含该图像的所有 cmets。

目前我正在发送一个 AJAX 请求以从数据库加载 cmets 并将它们回显到另一个页面中。然后，我使用 jQuery 在 DIV 容器中附加该数据。单击另一个图像会清除容器并通过新的 AJAX 请求加载新数据。

在我看来，这可能不是最有效的方法，因为如果用户来回点击页面上的图像，那么每次都必须重新加载数据。

我看到每次选择新图片时 facebook 都会更改 URL。那么他们是否可以使用 URL 中的 ID 来加载数据而不发送 AJAX 请求？

可能是一旦加载了数据并选择了另一个图像，最好将旧图像隐藏在页面上而不是丢弃它们？这样如果再次单击图像，就不需要重新加载其数据？

【问题讨论】：

最好一次性加载所有数据并隐藏不必要的数据。并在您需要的某些事件中显示这些数据。

标签： javascript jquery html ajax

【解决方案1】：

以下是关于如何避免对同一图像发出频繁/重复的 ajax 请求的想法。

假设你有一个在你的 div 中绘制 cmets 的函数，它接受来自服务器的响应，例如：

function displayComments(resp) {
    //Do stuff
}

让我们假设图像点击的 ajax 调用如下所示。

//We're probably better of using the wrapper (class/ID) of images to
//delegate events since setting/unsetting data may cause problems
//if we'd used bind on images directly
$("imagesContainerSelector").on("click", "img", function() {

    var $this = $(this);

    //See if comments have already been fetched previously.
    //If yes, we'd have stored them as that image's data and 
    //we'd now simply use that data to display the comments.
    if ( $this.data("comments") ) {

        displayComments($this.data("comments"));
    } else {
        //We've not fetched comments for this image yet, so, fetch it
        $.ajax({
            url: '...',
            data: '...'
            //more options
        }).done(function(data) {
            //When done, display comments
            displayComments(data);
            //Set the resp as data for later use
            $this.data("comments", data);
        });
    }
});

【讨论】：

谢谢，看起来不错。您将如何存储传入的数据？二维数组？ data() 函数会是什么样子？
存储来自服务器的数据，或任何您想要存储的数据。 .data() 是一个内置的 jQuery 方法来存储任意数据。
谢谢哥们。 .data() 函数必须附加到 div 元素？它本质上会将我的整个 cmets 数据存储在该元素的“data-x”属性中，这在 DOM 上不可见？
性能怎么样 - 这种方法比重复的 ajax 调用更快吗？
是的，通过.data() 设置的data-* 将存储在内存中并且在DOM 中不可见。当然，这比无缘无故地访问服务器要快得多！

【解决方案2】：

如果您在某些 div 中重新指定 -Tag，则在您执行此操作后会加载图片。如果你两次或多次指定同一张图片，则该图片已经在大多数浏览器的缓存中。这就是为什么你可以做类似的事情

$('#divid').html(' ');

如果你想预加载你的图片，我会把一些图片放到某个非常小的 div 中。如果您将图片放入隐藏容器中，某些浏览器不会预加载它们。

如果您将图片存储到某个数据库或内存缓存中，请使用缓存头。您可能会编写一些 outputpicture.php?id=12345。在那种情况下，像

header('Content-Type: '.get_img_type($data));
header('Content-Length: '.strlen($data));
header("Pragma: public");
$expires = 60*60*24*14;
header("Cache-Control: maxage=".$expires);
header("Last-Modified: Mon, 26 Jul 1984 05:00:00 GMT");
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$expires) . ' GMT');

可以帮上大忙。

【讨论】：

【解决方案3】：

您可以在每次发出 ajax 请求时在 javascript 对象中添加您的获取地址，并将加载的内容映射到其中。
然后当用户单击图像时，而不是发送 ajax 请求，首先检查对象中是否有该请求以从那里加载它，如果对象中没有地址，则可以继续并发送 ajax 请求并将其结果保存到我提到的对象中。

【讨论】：