时间戳

首页 > 解决方案 > 使用 HTML 部分进行无限加载

javascript - 使用 HTML 部分进行无限加载

问题描述

基本上，我试图在产品列表上创建一个无限加载页面，使用加载更多并在分页上触发点击事件。

我的问题是我可以将下一页加载到 HTML 中，但它会拉入整个 HTML 文件，而不仅仅是产品。

我正在尝试使用 HTML 部分将下一页产品附加到当前 div 中。

这是我目前的 JS。

$(".page-next a").on("click", function (e) {
      e.preventDefault();
       var partial = "@Html.Partial('_ProductWithHover')";
       var url = $(this).data('url');
       $.ajax({url: url,method: 'GET',dataType: 'html', success: function (data) {
       $('#js-infinite-scroll-page').append(partial);
        }
     });
});

不确定我是否应该按照我的方式包括我的部分，所以任何关于如何让这个工作的反馈或建议都会很棒。

提前致谢！

标签： javascript

解决方案

由于这是一种异步行为，您可能应该更改后端 api 以使用必要的 json 进行响应，并在客户端构建 dom。这样就容易多了。另外，我不完全明白，您如何向后端服务提供有关无限加载当前状态的信息。

所以无限加载是一种美化的分页，它的工作原理是这样的：

您最初渲染了一些元素，当您滚动足够多时，您会触发加载下一个 n 元素的请求，并将它们附加到您的列表中。为此，您必须让后端知道您所处的位置，然后它才能返回下一个 n 元素。

推荐阅读