如何通过 jquery ajax 按需加载巨大的 html 数据

Question

我已经开发了我们的公司网站，我们在其中显示一个产品详细信息意味着在 aspx 页面中的一条记录。有时我们的 html 数据很大，用户必须多次滚动页面才能阅读整个内容。我知道如何通过 jquery ajax 调用 asp.net 服务器端方法来获取和显示页面中固定数量的记录并解析 json 以填充 UI。问题是，在我的情况下，记录是我每页显示的记录，记录来自数据库。每条记录都是我正在展示的巨大 html 数据。在这里，我给出了我们网站的示例 url，我们在其中显示了巨大的 html 数据。 http://www.bba-reman.com/content.aspx?content=bba_reman_diagnostics_tools

我想知道一种好的技术，通过它我可以在我的页面中显示部分数据，当用户向下滚动时，将获取并显示下一组数据。所以建议我如何从整个 html 中提取部分 html 并显示在页面中，当用户向下滚动时，然后提取下一部分 html 并显示在页面中。所以简而言之，我需要知道如何将巨大的 html 数据分成几部分。请帮助我的概念。谢谢

Answer 1

如果您的意思是您提供的链接上的所有产品内容都存储在 db 中的一个字段中，您可以使用 wrap() 之类的方法使每个产品像一行并根据用户交互显示一定行。

这里有一些示例代码，通过在浏览器控制台中运行在您的页面上进行测试。它在顶部创建了一个非常简单的寻呼机，也可以在底部克隆。可以通过添加一些更好的 ID 来改进页面中的标记以更有效地使用 jQuery，并且还会进行一些不寻常的嵌套

$(function(){
/* wrap each pair of picture and description in a div*/
$('.diagnostic_picture').each(function(){
   $(this).next('.diagnostic_information').andSelf().wrapAll('<div class="product_row" style="clear:both">');
});
/* cache rows to variable */
var $products=$('.product_row');
var total_products=$products.length;
/* hide all but first 5 "rows" */
$products.slice(5).hide();
/* create  a pager based on qty of products and 5 per page */
var pager='<ul class="pager" style="height:1.5em; margin: 10px 0;">';
var pager_length=Math.round( total_products/5);

for( i=0; i< pager_length; i++){
    pager+='<li style="float:left"><a href="#" style="padding:5px;color:blue; background: #CCC; margin-right:5px; display:block" data-pager_start="'+(i*5)+'">'+(i+1)+'</a></li>';
}
pager+='</ul>';
/* insert pager before first "row" */
$products.eq(0).before( pager);
/* pager click handler */
$('.pager a').click(function(){
    var start=$(this).data('pager_start');
    $products.hide().slice(start, (start+5)).show();
    return false;
});

});

我创建了一个寻呼机只是作为示例，您也可以基于滚动显示更多行。您应该可以将此代码直接放到您的页面中进行尝试

Answer 2

我在我的一个项目中遇到了类似的情况，我通过使用 JQuery .Scroll Event 解决了它。这是滚动事件的official link。您需要做的就是：

1. 确定您希望一次向用户显示的 HTML 的字符大小限制。说它是 X。如果您的总 HTML 字符数超过 X，那么您只需从 DB 返回 X（或从 CS 文件中的业务逻辑返回，以防您想避免使用多个 DB 调用）

   李>

2. 捕获用户的Scroll事件，并通过将文本附加到标签上来获取+绑定下一组数据