如何通过 JavaScript 调用带有参数的托管 bean 方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18975746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call managed bean methods with parameters via JavaScript
提问by Tugrul
I am developing a web application and I use JSF and PrimeFaces frameworks and external Geo Map API.
我正在开发一个 Web 应用程序，我使用 JSF 和 PrimeFaces 框架以及外部地理地图 API。
The Map API gives me POI_idwhen I clicked on a POI on the map. But it's not enough for me, I want to get information about POI from a servlet and display it in a pop-up window. (fields like address, name, phone number, etc.).
POI_id当我单击地图上的 POI 时，Map API 会提供给我。但这对我来说还不够，我想从 servlet 获取有关 POI 的信息并将其显示在弹出窗口中。（地址、姓名、电话号码等字段）。
So, I need to send an HTTP request to the servlet in my managed bean when I click the POI on the map.
因此，当我单击地图上的 POI 时，我需要向托管 bean 中的 servlet 发送 HTTP 请求。
I can get poi_id, but I cannot send this id to the backend managed bean, so getting the POI information does not seem possible.
我可以获取poi_id，但我无法将此 id 发送到后端托管 bean，因此获取 POI 信息似乎是不可能的。
How can I send poi_idto my managed bean and handle the response to display in a popup window?
如何发送poi_id到我的托管 bean 并处理响应以显示在弹出窗口中？
回答by Kishor Prakash
You can use PrimeFaces remote command component(<p:remoteCommand>).
您可以使用PrimeFaces 远程命令组件( <p:remoteCommand>)。
RemoteCommand enables executing backing bean methods and do partial update triggered by custom client side script.
RemoteCommand 允许执行支持 bean 方法并执行由自定义客户端脚本触发的部分更新。
Add it to the view it in a following way:
通过以下方式将其添加到视图中：
<p:remoteCommand name="myRemote" actionListener="#{myBean.listen}"/>
And use it in Javascript like so:
并在 Javascript 中使用它，如下所示：
<script type="text/javascript">
myRemote(); //makes a remote call
</script>
or call it from an event handler like so:
或者像这样从事件处理程序调用它：
<div onclick="myremote();">...</div>
If you additionally want to pass parameters to the server make a following call:
如果您还想将参数传递给服务器，请进行以下调用：
<script type="text/javascript">
myRemote([{name:'param1', value:150}, {name:'param2', value:220}]); //makes a remote call with parameters
</script>
The listener could be like:
听众可能是这样的：
public void listen(){
FacesContext context = FacesContext.getCurrentInstance();
Map<String,String> params = context.getExternalContext().getRequestParameterMap();
System.out.println(params.get("param1"));
System.out.println(params.get("param2"));
}
One of the comments asked to return a Value to Javascript.
Well in that case you can use Primeface's Request Context's execute()method to execute any javascript you want.
其中一条评论要求向 Javascript 返回一个值。
那么在这种情况下，您可以使用 Primeface 的Request Context的execute()方法来执行您想要的任何 javascript。
RequestContext.getCurrentInstance().execute("your javascript code");
回答by skuntsel
Just to add to Kishor's (halfway) answer, you need to have a to-be-updated component in your view (popup window as you call it) and ajax-update it after the request has been successfully completed.
只是为了添加到 Kishor 的（中途）答案，您需要在您的视图中（如您所称的弹出窗口）中有一个待更新的组件，并在请求成功完成后对其进行 ajax-update。
You can use remote command to send the AJAX request with an extra parameter attached and ajax-update the JSF component responsible to be a popup window. Like so (for PrimeFaces 3.x):
您可以使用远程命令发送带有附加参数的 AJAX 请求，并 ajax-update 负责作为弹出窗口的 JSF 组件。像这样（对于 PrimeFaces 3.x）：
<p:remoteCommand name="myRemote" actionListener="#{myBean.listen}"
update="dialog" oncomplete="dlg.show()" />
...
<div onclick="myremote([{name:'poi_id', value:poi_id}]);">...</div>
...
<p:dialog id="dialog" widgetVar="dlg">
<h:outputText value="#{myBean.address}" />
...(display other information)
</p:dialog>
with
和
String address;
public void listen(){
String poi_id = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("poi_id");
address = getAddress(poi_id);
}
The alternative to using a remote command is to have a hidden form with a hidden input that will be used to transmit the parameter to the backing bean, that could be separated from other beans to handle the retrieval of necessary information based on your poi_id:
使用远程命令的替代方法是拥有一个带有隐藏输入的隐藏表单，该表单将用于将参数传输到支持 bean，它可以与其他 bean 分开以处理基于您的必要信息的检索poi_id：
<h:form id="poi-form" styleClass="invisible">
<h:inputHidden id="poi" value="#{poiBean.poi}" />
<p:commandButton id="info" action="#{poiBean.info}"
update="dialog" oncomplete="dlg.show()" />
</h:form>
<div onclick="document.getElementById('poi-form:poi').value = poi_id;
document.getElementById('poi-form:info').click();">...</div>
...
<p:dialog id="dialog" widgetVar="dlg">
<h:outputText value="#{poiBean.address}" />
...(display other information)
</p:dialog>
with
和
@ManagedBean
@RequestScoped
public class PoiBean {
private String poi;//getter+setter
private String address;//getter
//other properties
public void listen(){
address = getAddress(poi);
//other properties
}
}
