约翰穆勒无限卷轴答案

【问题标题】：John Mueller infinite scroll约翰穆勒无限卷轴
【发布时间】：2016-04-25 09:23:50
【问题描述】：

按照谷歌的建议，我正在尝试找出具有历史和分页的无限滚动， https://googlewebmastercentral.blogspot.in/2014/02/infinite-scroll-search-friendly.html

John Mueller 的演示完全符合我的要求，但我无法弄清楚数据的加载方式/位置。 http://scrollsample.appspot.com/items

我复制了页面源代码以及 js 和 css，但源代码当然是针对它恰好位于的特定“页面”。一切都只是指向 /items 目录，并且页面没有重新加载新数据，只是刷新了内容区域，所以我不明白。

可能只是一个菜鸟，但任何见解都值得赞赏。

【问题讨论】：

您在某个地方有一个回调，当您接近滚动结束时会调用该回调，并且需要新数据。您在那里进行 ajax 调用，并将新收到的项目添加到您的列表中（在 DOM 中）。请发布您的代码，以便我们提供帮助
我了解，但我看不到实际数据的检索方式/位置。对 /items?page=2 的 ajax 调用没有显示数据是如何访问和格式化的。

标签： javascript jquery infinite

【解决方案1】：

如果你“查看源代码”你会看到他们reference a file of JavaScript

在这个文件中是实现分页的函数。例如，在loadFollowing() 函数中，您将看到对$.getJSON() 的调用，它通过AJAX 获取JSON 数据。然后它调用一个函数 showFollowing() 将内容（来自 JSON 数据）添加到页面中：$('div.listitempage:last').after(data.response);

【讨论】：

【解决方案2】：

示例页面利用http://scrollsample.appspot.com 提供的服务，使用完整的 URL http://scrollsample.appspot.com/items?page=2&type=json 来获取以 JSON 返回类型分页的特定数据。

您可以在浏览器中通过该 url 并查看从服务返回的原始数据。

网页也托管在同一个基本网址上这一事实无关紧要。添加相关参数后，您将不再获得 HTML“网站”。相反，您会得到一个格式化的数据响应（在本例中为 JSON）。

【讨论】：

谢谢，现在看来很明显了。我错过了 type=json 参数的重要性。
好吧，我离得更近了，但仍然受阻。有没有人可能有一个功能齐全的示例，其中包含所有源代码？我试图模拟 type=json 参数会发生什么，并成功加载了一页，但除此之外没有。

【解决方案3】：

我在他们的代码中看到了这一点：

$.getJSON(next_data_url, function(data) {
    showFollowing(data);
    is_loading = 0;
});

【讨论】：

您能否解释一下您的答案如何解决问题中的问题？仅代码答案不是很有用，尤其是对于偶然发现这篇文章的更多读者。
引用：“John Mueller 的演示完全符合我的要求，但我无法弄清楚数据的加载方式/位置”

【解决方案4】：

数据正在从 'http://scrollsample.appspot.com/items?page=2&type=json' 当您启动页面时，会调用函数 primeCache() 并填充“next_data_cache”变量。

当您浏览页面时，会调用其他函数，这次是“showFollowing()”，它通过 getJSON 获取数据并再次将数据传递给“next_data_cache”变量。

【讨论】：

我得到了这么多 [排序]，但我不知道数据来自哪里。 getJSON 使用相同的 url /items&page=some number 但我看不到实际数据的检索位置。示例网站显示“这是来自 last.fm 的 GetHypedTracks 的项目列表”，但我没有找到对该数据的引用。
@twiddy，查看我对检索数据的代码的回答
@twiddly 可能scrollsample.appspot.com/items?page=2&type=json 有一个服务器端代码正在向“last.fm”发出请求，因此您只会得到结果，而不是代码和数据所在的地址已加载