javascript - 如何使用原生 JavaScript 在 HTML DOM 事件上调用 JSF 托管 bean？

Question

我需要在 HTML DOMload事件期间使用 ajax 执行 JSF 托管 bean 操作方法，类似于 jQuery 的$(document).ready(function() { $.ajax(...) }). 我在这个项目中只能使用JSF生成的JavaScript。有没有办法在本机 JSF 中做到这一点？我可以使用哪个事件或者我可以使用哪个 JSF ajax 函数？

我正在使用 JSF 2.0、Facelets 和 PrimeFaces。

score 30 · Accepted Answer

几种方式。

使用<h:commandScript>. 请注意，这仅在 JSF 2.3 之后可用。

<h:form>
    <h:commandScript name="commandName" action="#{bean.action}" render=":results" />
</h:form>
<h:panelGroup id="results">
    ...
</h:panelGroup>

您可以在 JS 中调用它，如下所示：

commandName();

参数可以如下传递：

commandName({ name1: "value1", name2: "value2" });

并获得如下：

String name1 = externalContext.getRequestParameterMap().get("name1"); // value1
String name2 = externalContext.getRequestParameterMap().get("name2"); // value2

要在事件期间调用它load，请设置autorun="true".

<h:commandScript ... autorun="true" />

如果您使用 PrimeFaces，请使用它的<p:remoteCommand>.

<h:form>
    <p:remoteCommand name="commandName" action="#{bean.action}" update=":results" />
</h:form>
<h:panelGroup id="results">
    ...
</h:panelGroup>

您可以在 JS 中调用它，如下所示：

commandName();

然而，这不使用 JSF native jsf.ajax.request()，而是使用 PrimeFaces 原生 jQuery（你知道，PrimeFaces 是 jQuery/UI 之上的 JSF 组件库）。

参数可以如下传递：

commandName([{ name: "name1", value: "value1" }, { name: "name2", value: "value2" }]);

并获得如下：

String name1 = externalContext.getRequestParameterMap().get("name1"); // value1
String name2 = externalContext.getRequestParameterMap().get("name2"); // value2

要在事件期间调用它load，请设置autoRun="true".

<p:remoteCommand ... autoRun="true" />

如果您使用的是 OmniFaces，请使用其<o:commandScript>. 用法与 with 完全相同，<h:commandScript>但可用于较旧的 JSF 2.x 版本。

只需在第一个示例中替换h:为。o:历史注释：<h:commandScript>完全基于<o:commandScript>.
使用“隐藏形式”技巧（实际上，“hack”被赋予了丑陋更好的措辞）。
```
<h:form id="form" style="display:none;">
    <h:commandButton id="button" action="#{bean.action}">
        <f:ajax render=":results" />
    </h:commandButton>
</h:form>
<h:panelGroup id="results">
    ...
</h:panelGroup>
```
您可以在 JS 中调用它，如下所示：
```
document.getElementById("form:button").onclick();
```
请注意触发的重要性，而onclick()不是. 立即调用该函数，而仅触发元素上的“单击”事件，IE 不支持该事件。如果您使用的是，则可以安全地使用。click()<h:commandButton>onclick()onclickclick()<h:commandLink>click()

<h:inputHidden>您可以通过预先由 JS 填写的相同形式传递参数。这在如何将 JavaScript 变量作为参数传递给 JSF 操作方法中进行了演示？

要在事件期间调用它load，请考虑将其放入<h:outputScript target="body">. target="body"自动将in<script>放在末尾<body>，因此$(document).ready()不需要包装器。
```
<h:outputScript target="body">
    document.getElementById("form:button").onclick();
</h:outputScript>
```
或者，创建一个自定义UIComponent扩展UICommand并生成必要的 JSF 本机jsf.ajax.request()调用。例如，您可以查看OmniFaces的源代码<o:commandScript>。

javascript - 如何使用原生 JavaScript 在 HTML DOM 事件上调用 JSF 托管 bean？

1 回答 1

Related

Reference