实现一个异步加载和呈现的列表[关闭]答案

【问题标题】：Implementing a list that loads & renders asynchronously [closed]实现一个异步加载和呈现的列表[关闭]
【发布时间】：2012-12-09 02:28:51
【问题描述】：

我必须在我的网站中实现一个列表，其行为如下：

1.　在主页中，会呈现一个列表并仅显示前 12 项，然后是“加载更多...”按钮。

2.　在页面加载完成后，接下来的 12 条数据应该被预先加载。

3.当点击“加载更多”时，加载的 12 个被渲染，紧接着下一个被预加载，以此类推一次又一次……

我的应用正在使用 node.js、express.js、jQuery、ejs 和 bootstrap。

现在，我的服务器逻辑成功生成数据列表，然后我使用 ejs 模板渲染整个大列表。

我很困惑如何使用 ajax 将其更改为动态列表。

“第一次渲染”是否仍应使用来自服务器的 ejs 完成，然后任何添加的列表项都将使用 ejs 再次渲染，但这次是从客户端？实现我需要的行为的最佳/简单方法是什么？顺便说一句 - 每个列表项都包含一个 img 标签，直接指向一个独特的图像 - 使用 JSON 时这不是问题吗...？

任何帮助或有用示例的链接 - 将不胜感激。谢谢。

【问题讨论】：

我没有投反对票，而是投了反对票。你在这里问了一个非常（太）广泛的问题。如果您遇到困难，您实际上应该“做某事”并在这里提出具体问题。在目前的形式中，人们所能提供的只是一般“ajax 教程”的链接。
嘿安迪，我会很感激我的问题的某些部分的答案。无论如何，通常我的问题非常具体，但这个问题更广泛。我仍然认为可以给出一个简短且（非常）抽象的答案，这将有很大帮助......谢谢。
这不应该被否决。

【解决方案1】：

据我所知，您的 AJAX 调用有两种选择。一种是将 JSON 返回到浏览器并使用客户端模板库来呈现数据。另一种选择是仅在服务器上呈现列表并将 HTML 返回到浏览器，然后您可以将其直接插入 DOM。

您需要在 express 中设置不同的路由，以便它只返回列表项的 JSON 或 HTML，而不是第一次加载时的整个 HTML 文档。

将 HTML 返回到浏览器的好处是您不需要在浏览器上加载模板引擎或在浏览器和服务器中都有模板逻辑，这可以减少代码大小并保持一切干燥。但是，如果您需要将数据存储在浏览器内存中以执行其他操作，那么 JSON 是您最好的选择。

我很高兴就您需要使事情更清楚的任何一点进行扩展。

【讨论】：