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

Passing data between elements in UI

本文关键字：数据之间元素 UI 更新时间：2023-09-26

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

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

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

更新1：我找到了 jQuery data（） api。似乎这会起作用。评论？

更新2：后来进行了一些测试，事实证明 data（）实际上将数据附加到元素上，而不是在div 本身中显示它。

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

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

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

在这种情况下，用户只会看到一个名为"沙皇战争"的链接，但您的javascript可以轻松访问data属性以获取所需的数据。这种方法的另一个好处是jQuery将自动使data（）api可以访问data-属性。

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

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

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