如何通过JavaScript调用带参数的托管Bean方法

Question

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

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

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

我可以获取poi_id，但我无法将此ID发送到后端托管的bean，因此似乎无法获取POI信息。

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

- Tugrul

Answer 1

您可以使用PrimeFaces远程命令组件(<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"));
}

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

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

- Kishor Prakash

---

我为你的好回答添加了一个用例，并修正了一些拼写错误。如果需要，随时可以恢复到原始内容。+1。 - skuntsel

listen()函数能否返回一个值？如果可以，客户端的JavaScript如何使用它？或者它必须被注入到HTML元素中吗？ - birgersp

Answer 2

只是为了补充Kishor的（部分）答案，您需要在视图中有一个要更新的组件（正如您所称的弹出窗口），并在请求成功完成后进行ajax更新。

您可以使用远程命令发送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可以与其他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
    }

}

- skuntsel