如何使用本机JavaScript在HTML DOM事件上调用JSF管理的bean？

一尘不染

如何使用本机JavaScript在HTML DOM事件上调用JSF管理的bean？

javascript

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

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

阅读 470

2020-04-25

共1个答案

一尘不染

几种方法。

使用<h:commandScript>。注意，仅自JSF 2.3起可用。

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

…

您可以在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" />

…

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

    commandName();

但是，它不使用JSF本[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>。用法与之完全相同，<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>

…

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

    document.getElementById("form:button").onclick();

请注意触发的重要性，onclick()而不是click()在情况下<h:commandButton>。该onclick()立即调用onclick功能，而click()只是触发因素，这是不支持IE的“click”事件。如果您使用<h:commandLink>，则可以放心使用click()。

您可以通过<h:inputHidden>与JS预先填写的表格相同的形式来传递参数。这在如何将JavaScript变量作为参数传递给JSF操作方法中得到了证明。

要在load事件期间调用它，请考虑将其放在中<h:outputScript target="body">。该target="body"自动将<script>在端部<body>，因此$(document).ready()包装是不必要的。

    <h:outputScript target="body">
    document.getElementById("form:button").onclick();
</h:outputScript>

或者，创建一个UIComponent扩展UICommand并生成必要的JSF本机jsf.ajax.request()调用的定制。作为示例，您可以查看OmniFaces的源代码<o:commandScript>。

2020-04-25