javascript - 在java后端和javascript前端之间传输数据

Question

我正在创建一个 Java EE Web 应用程序。该应用程序使用 Java 作为服务器端编程语言，并使用 Javascript 作为客户端。 Javascript 位于 HTML5 文档中(出于特定原因需要)。我的 Javascript 需要来自服务器的一些数据才能执行其任务。这给我留下了一个问题:如何用来自 Java 服务器的数据填充 Javascript 变量？

我正在考虑使用 JSF 并将 HTML5 与 Javascript 合并到其中。显然，服务器端代码首先渲染，然后发送到客户端。在这种情况下，我可以这样做:

var data = #{controller.getData};

如果这确实有效，则存在一个问题:数据是“静态的”。然而，我需要能够通过从服务器接收新数据来频繁更改这些数据。但是，如果服务器端代码已呈现并发送到客户端，则每次调用 #{controller.getData} 将返回相同的值。

因此，这促使我研究 AJAX。 JSF 提供了一个 AJAX Javascript 库，但是，我似乎无法理解如何使用它来更改 HTML5 文档(在 JSF 页面内)的 Javascript 代码中的变量。那么，我又该如何用来自 Java 服务器的数据填充 Javascript 变量呢？

Answer 1

如果您使用的 JSF 没有任何组件库，您可以将脚本嵌入到 panelGroup 中并通过 ajax 重新呈现此面板:

<h:inputText id="mInput" value="#{myBean.name}">

    </h:inputText>
    <h:commandButton value="Do it"  action="#{myBean.doit}">
        <f:ajax render="thePanel" />
    </h:commandButton>


    <h:panelGroup id="thePanel">
        <h:outputText value="#{myBean.name}" />

        <script>
            var myVar = '#{myBean.name}';
            alert(myVar);
        </script>
    </h:panelGroup>

但是如果你有 Primefaces，你可以在 Controller 上调用 JavaScript，浏览器收到响应后就会执行它:

RequestContext.getCurrentInstance().execute("alert('test');");

Primefaces 的另一个可用选项是使用 oncomplete 属性:

<p:commandButton value="Do it" action="#{myBean.doIt}" oncomplete="alert('test');" />