如何通过 JavaScript 调用带参数的托管 bean 方法答案

【问题标题】：How to call managed bean methods with parameters via JavaScript如何通过 JavaScript 调用带参数的托管 bean 方法
【发布时间】：2013-09-29 07:45:12
【问题描述】：

我正在开发一个 Web 应用程序，我使用 JSF 和 PrimeFaces 框架以及外部 Geo Map API。

当我点击地图上的 POI 时，地图 API 会为我提供 POI_id。但这对我来说还不够，我想从 servlet 中获取有关 POI 的信息并将其显示在弹出窗口中。（地址、姓名、电话号码等字段）。

所以，当我单击地图上的 POI 时，我需要向托管 bean 中的 servlet 发送 HTTP 请求。

我可以得到poi_id，但是我不能把这个id发送到后端托管bean，所以获取POI信息似乎是不可能的。

如何将poi_id 发送到我的托管bean 并处理响应以显示在弹出窗口中？

【问题讨论】：

标签： javascript jsf primefaces httprequest

【解决方案1】：

您可以使用PrimeFaces remote command component (<p:remoteCommand>)。

RemoteCommand 允许执行支持 bean 方法并执行部分操作由自定义客户端脚本触发的更新。

通过以下方式将其添加到视图中：

<p:remoteCommand name="myRemote" actionListener="#{myBean.listen}"/>

并像这样在 Javascript 中使用它：

<script type="text/javascript">
   myRemote(); //makes a remote call
</script>

或者像这样从事件处理程序中调用它：

<div onclick="myremote();">...</div>

如果您还想向服务器传递参数，请进行以下调用：

<script type="text/javascript">
   myRemote([{name:'param1', value:150}, {name:'param2', value:220}]); //makes a remote call with parameters
</script>

听者可能是这样的：

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"));
}

其中一个 cmets 要求将值返回给 Javascript。
那么在这种情况下，您可以使用 Primeface 的 Request Context 的 execute() 方法来执行您想要的任何 javascript。

RequestContext.getCurrentInstance().execute("your javascript code");

【讨论】：

我为您的好答案添加了一个用例，并修复了一些错别字。如果您愿意，请随时恢复为原始版本。 +1。
listen() 可以返回值吗？如果是这样，它如何在客户端javascript中使用？还是必须将其注入 HTML 元素？

【解决方案2】：

只是为了添加到 Kishor 的（中途）答案，您需要在您的视图中有一个待更新的组件（您称之为弹出窗口）并在请求成功完成后对其进行 ajax-update。

您可以使用远程命令发送附加参数的 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>

与

String address;
public void listen(){
    String poi_id = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("poi_id");
    address = getAddress(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>

与

@ManagedBean
@RequestScoped
public class PoiBean {

    private String poi;//getter+setter
    private String address;//getter
    //other properties

    public void listen(){
        address = getAddress(poi);
        //other properties
    }

}

【讨论】：