在HTML中包含用于Javascript消费的信息？

Question

我正在使用app engine（java）和GWT构建一个Web应用程序，虽然我认为我的问题更多是一般的javascript问题。

在我的应用程序中，我想要包含一个从我的数据库中的数据生成的侧边菜单。这显然需要从servlet动态完成。

目前，我正在发送一个空白菜单容器，然后进行ajax调用以获取填充菜单所需的信息。我宁愿只是在原始请求中发送菜单信息，所以我不需要浪费时间再发一次请求。我使用这种初始方法因为它似乎更简单：我只是编写了一个gwt rpc服务来抓取我需要的数据。

我的问题是，我可以指示像gwt这样的javascript库在当前网页中查找其信息吗？我是否必须在原始HTML响应中隐藏此信息，可能是隐藏的div或其他内容？

Answer 1

您可以在定义数据的原始响应中包含脚本块，然后使用onload事件（或类似）根据该数据创建菜单;这与你现在正在做的非常相似，但没有额外的服务器之旅。我假设构建菜单的数据是通过客户端上的JavaScript以某种方式转换的;否则，只需直接包含菜单标记。

Answer 2

GWT有一个名为JSNI（Javascript Native Interface）的东西，它可以与其他非GWT Javascript连接。因此，您可以在HTML页面容器中包含生成的菜单项作为Javascript对象。然后，在您的GWT代码中，您有一个JSNI调用来获取此数据，并使用GWT方法将其放在UI / DOM中的正确位置。

Answer 3

几周前我问了一个类似的问题，关于如何在HTML标签内安全地存储数据。它还包含一些指向其他问题的链接。 Here

Answer 4

一般有2种选择：

• 将数据存储在html代码中的某些xml标记中，然后通过遍历DOM从中获取信息。 （你可以用css隐藏它们）

• 将数据作为JSON数据存储在脚本标记中。 （几乎每种语言都有解码器）

  var data = {“foo”：“bar”，“my_array”：[]};

Answer 5

如果您要嵌入的数据仅限于菜单项，为什么不直接从简单的<ol>和<li>元素生成轻量级HTML？您仍然可以使用模板引擎将HTML保留在Java代码之外。菜单标记可以使用CSS进行样式设置，或者如果您需要比仅仅<ol>和<li>元素更漂亮的东西，您可以在页面加载后使用JavaScript按摩DOM（阅读：progressive enhancement）

如果您正在寻找一个更通用的解决方案，除了菜单外，您还可以在页面中嵌入一个JSON块，以便在页面加载时动态生成菜单。

或者，您可以考虑使用microformat that is suitable for menu data。