在 UI 中的元素之间传递数据

Question

我是 Web 应用程序的新手，我正在尝试了解在 HTML 中处理数据的最佳方式。我正在使用 Appengine (Python) 并设法将一堆数据加载到视图中。在最简单的形式中，它是一组电影名称，每个名称都有与之相关的详细信息（例如年份、评级等）。现在如何在电影链接和显示所有详细信息的 div 之间传递数据？我将在我的应用程序中对一些控件使用 jQuery，所以我想知道是否有办法将数据绑定到控件？

另外，谁能告诉我这方面的标准是什么，即如果我一次调用将所有这些数据加载到 UI 中（假设它不是很多电影标题），这不会让人们更容易屏幕抓取这些信息？还是这里通常使用一些混淆？

对不起，如果我不是很清楚，但我真的是 Web 开发的绝对初学者！

更新1： 我找到了 jQuery data() api。看来这会奏效。评论？

更新2： 稍后进行一些测试，结果表明 data() 实际上将数据附加到元素上，而不是在 div 本身中显示它。

Answer 1

有几种方法可以做到这一点，但基本思想是将数据以不可见的方式呈现在 HTML 中，然后使用 Javascript 解析 HTML 并在需要时提取数据。

现代浏览器上最简单的方法是使用 data- 属性。这些是任何以 data- 开头的属性，您可以自己命名其余属性。例如：

<a href="/movie/1234" data-id="1234" data-title="Tsar Wars" data-actors="[Harryson Fjord, Carry Fischer]">Czar Wars</a>

在这种情况下，用户只会看到一个名为“Tsar Wars”的链接，但您的 javascript 可以轻松访问 data- 属性以获取所需的数据。这种方法的另一个好处是 jQuery 将自动使 data- 属性可由 data() api 访问。

另一种方法是使用一个隐藏的 HTML 列表元素，其中包含列表中的所有数据元素，但您必须自己解析。

没有标准的混淆。您需要在服务器端混淆自己，并在您的 JS 中取消混淆。在 js 中找出任何混淆算法并不太难，所以这不值得你花时间。

如果数据确实是私有的，那么您必须将其构建为在服务器上进行所有处理。例如，仅显示令牌（如 1234），并使用 AJAX 调用将令牌传递给服务器，以便服务器可以进行数据处理并将公共安全结果返回给脚本。