javascript - 如何高效加载过滤后的 AJAX 内容？

Question

我正在开发一个加载 AJAX 的购物应用程序，带有 Masonry布局。

我使用循环来加载和显示产品:

function get_next_entry() {
    $data = next_entries(); //get the ids of the next 6 products
    $.ajax({
          type: 'POST',
          url: $url,
          data: $data,
          cache: true,
          success: function(data) {
                var xml = $(data);
                xml.find('entry').each(function(){
                    var el = $($(this).text());
                    el.imagesLoaded(function() {
                        $collection.append( el ).masonry( 'appended', el, true );
                        el = set_visibility( el );
                    });
                });
                if ($resync) {
                    $collection.masonry();
                }
                get_next_entry();
            },
          dataType: 'xml',
          async:true
    });
}

$data 包含一组产品 ID。每个产品的 HTML 由其 id 缓存，因此无需 MySQL 查询即可检索它们以减少我的数据库服务器上的负载，并且可以更快地提供服务。

我在产品上有一个 jQuery 过滤系统，可以切换可见性。

选择过滤器后，我只需要从该过滤器加载产品。然后取消选择过滤器后，我需要恢复加载整个目录。

我不想对多个 MySQL 查询执行此操作，因为每个用户会有很多这样的查询(我的循环一次加载 6 个产品，因此每个循环周期的查询太多)。

我目前的解决方案是通过 AJAX 将整个目录列表作为 id 的 XML 列表，并将过滤器作为属性(这样我就可以轻松地使用 jQuery 而不是 JSON 进行过滤)然后从中删除产品在我加载它们时列出:

<data>
    <product category="category">id</product>
    <product category="category">id</product>
    <product category="category">id</product>
    ...
</data>

有更好的方法吗？

Answer 1

如果您只是想听听替代方案，您可以使用 JSON 的多维数组，例如以下两个问题:1) Get data from php array - AJAX - jQuery2) json and multidimensional array

这可能会减少一些时间，因为编码比 XML 文本短。

但是，我仍然更喜欢您的方法，因为它更容易操作和管理数据。