在同一网页上加载多个数据集的最佳实践答案

【问题标题】：Best Practice for Loading Multiple Datasets on Same Webpage在同一网页上加载多个数据集的最佳实践
【发布时间】：2020-07-07 19:24:01
【问题描述】：

我正在尝试开发一个根据用户操作查询 MySQL 数据库的网页，但我正在努力找出最佳实践方法是什么。

例如，如果用户将鼠标悬停在选项 A 上，则显示数据库中与 A 相关的数据。如果用户将鼠标悬停在选项 B 上，则显示数据库中与 B 相关的数据。这意味着我只需要在任何时间点显示一组数据。

在我看来，我有以下选择，但我很想听听是否有更好的方法。

选项 1

最初查询整个数据库，加载到所需的许多元素，将它们全部隐藏并仅在悬停时显示相关元素。从其他网站的快速搜索来看，这似乎不是一种常见的方法，所以我猜这不是最佳做法。

选项 2

编辑：这个选项可能是个坏主意，我不希望新数据通过。数据应基于页面加载时间。

使用 AJAX 在悬停时查询数据库，并使用结果填充特定元素。老实说，这似乎不切实际，并且增加了一些数据库连接失败的风险。但是，这确实意味着我不必一次加载所有数据并填充一堆隐藏元素。

选项 3

查询整个数据库，但只在需要时加载元素 - 这甚至可能吗？

（注意：我使用的是 PHP 和 Javascript 的组合）

【问题讨论】：

您的选项 2 是否涉及使用 AJAX？
是的，这将涉及 AJAX

标签： javascript php html mysql

【解决方案1】：

第一个选项实际上取决于要查询的数据量。如果你知道你只有很少的元素，那么它是可行的，但否则它真的是低效和不切实际的。

第二个选项解决了我刚才讨论的关于第一个选项的问题，但会涉及到 ajax 的使用。

即使在需要时加载元素，第三个仍然会查询整个数据库。

所以，我想，最好选择第二个选项。有一点数据库连接失败的风险来代替查询整个数据库并加载所有元素是公平的。

【讨论】：

再想一想，使用 AJAX 的选项 2 可能会有问题。我不一定希望在悬停时通过更新的数据，它应该是页面加载时的数据。您知道实施选项 3 的好方法吗？（顺便会加载大约 50 条记录。）
是的，我认为这是可能的，尽管您仍然必须通过 ajax 请求数据。您可以只传递您想要记录的标识符，然后通过从数据库查询的记录集合在您的 php 端过滤它，返回请求的数据，然后将其插入 DOM。如果您有任何疑问，请随时提出。
如果我通过 php 返回加载时的所有数据并将其存储到一个数组中，我是否能够在悬停时引用相同的数组（仍然是 AJAX，如您所说）？
是的，当然，因为相同的 php 脚本将存在（包含从数据库查询的结果），除非页面刷新或移动到在这种情况下不会发生的其他页面，这要归功于 AJAX .

【解决方案2】：

HTML5 通过 title 属性原生支持您想要的内容。

<div title="17 left in stock! Order now!">7-port USB-C hub</div>

当您的用户将鼠标悬停在项目上时，这将显示“标题”文本。因此，在您的 HTML 中包含 title 属性数据就完成了。

AJAX 操作 (or the easier-to-use fetch() in modern HTML) 非常适合将新信息动态加载到您的页面中。但是您的要求似乎并不需要。您希望信息与页面一起加载。

如果您不喜欢title 弹出窗口的默认样式，您可以更改它。查找“样式化 HTML 工具提示”，您会看到很多教程。

（请记住，触摸屏移动设备无法进行悬停操作）。

【讨论】：

【解决方案3】：

为什么不使用选项 2 并在初始页面加载时，将时间戳保存在一些 html 标记中，例如
<div data-page-loaded-at="{{ timestamp/formatted date }}" style="display: none;" />?
然后，您可以将时间戳添加到您的 AJAX 请求并根据提供的时间获取数据。如果您不希望前端的用户能够通过更改时间戳来操作获取的数据，这当然不是一个好习惯。

【讨论】：

使用 jQuery，您可以访问该数据，例如 $('[data-page-loaded-at]').attr('data-page-loaded-at')