如何使用本机 JavaScript 在 HTML DOM 事件上调用 JSF 托管 bean? [英] How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?
问题描述
我需要在 HTML DOM load 事件期间使用 ajax 执行 JSF 托管 bean 操作方法，类似于 jQuery 的 $(document).ready(function() { $.ajax(...) }).我在这个项目中只能使用JSF生成的JavaScript.有没有办法在本机 JSF 中做到这一点?我可以使用哪个事件或我可以使用哪个 JSF ajax 函数?
I need to execute a JSF managed bean action method using ajax during HTML DOM load event, similar to jQuery's $(document).ready(function() { $.ajax(...) }). I can only use the JavaScript generated by JSF in this project. Is there a way to do it in native JSF? Which event can I use or which JSF ajax function can I use?
我使用的是 JSF 2.0、Facelets 和 PrimeFaces.
I'm using JSF 2.0, Facelets and PrimeFaces.
推荐答案
几种方式.
使用
Use
<h:commandScript>. Note that this is only available since JSF 2.3.
<h:form>
<h:commandScript name="commandName" action="#{bean.action}" render=":results" />
</h:form>
<h:panelGroup id="results">
...
</h:panelGroup>
您可以在 JS 中调用它，如下所示:
You can invoke it in JS as below:
commandName();
可以传递如下参数:
commandName({ name1: "value1", name2: "value2" });
获得如下:
String name1 = externalContext.getRequestParameterMap().get("name1"); // value1
String name2 = externalContext.getRequestParameterMap().get("name2"); // value2
要在 load 事件期间调用它，请设置 autorun="true".
To invoke it during load event, set 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 中调用它，如下所示:
You can invoke it in JS as below:
commandName();
然而，这不使用 JSF 原生 jsf.ajax.request()，而是使用 PrimeFaces 原生 jQuery(你知道，PrimeFaces 是一个基于 jQuery/UI 的 JSF 组件库).
This however doesn't use JSF native jsf.ajax.request(), instead it uses PrimeFaces native jQuery (you know, PrimeFaces is a JSF component library on top of jQuery/UI).
可以传递如下参数:
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".
To invoke it during load event, set autoRun="true".
<p:remoteCommand ... autoRun="true" />
如果您使用 OmniFaces，请使用其
If you're using OmniFaces, use its <o:commandScript>. The usage is exactly the same as with <h:commandScript> but then available for older JSF 2.x versions.
只需将第一个示例中的 h: 替换为 o:.历史记录:
Simply replace h: by o: in the first example. Historical note: the <h:commandScript> is entirely based off <o:commandScript>.
使用隐藏形式"的技巧(实际上，hack"是给丑陋的一个更好的措辞).
Use the "hidden form" trick (actually, "hack" is given the ugliness a better wording).
<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 中调用它，如下所示:
You can invoke it in JS as below:
document.getElementById("form:button").onclick();
注意在 onclick() 而不是 click() 的重要性.onclick() 立即调用 onclick 函数，而 click() 只触发元素上的click"事件，不支持在 IE 中.如果您使用的是 click() 代替.
Note the importance of triggering onclick() instead of click() in case of <h:commandButton>. The onclick() immediately invokes the onclick function while the click() only triggers the "click" event on the element, which is not supported in IE. If you were using a <h:commandLink>, you can safely use click() instead.
您可以通过
You can pass parameters via <h:inputHidden> in same form which you fill by JS beforehand. This is demonstrated in How to pass JavaScript variables as parameters to JSF action method?
要在 load 事件期间调用它，请考虑将它放在 <h:outputScript target="body"> 中.target="body" 自动将
