如何通过 JavaScript 调用带有参数的托管 bean 方法 [英] How to call managed bean methods with parameters via JavaScript

问题描述

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

I am developing a web application and I use JSF and PrimeFaces frameworks and external Geo Map API.

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

The Map API gives me POI_id when 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 时，我需要向托管 bean 中的 servlet 发送 HTTP 请求.

So, I need to send an HTTP request to the servlet in my managed bean when I click the POI on the map.

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

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 发送到我的托管 bean 并处理响应以显示在弹出窗口中?

How can I send poi_id to my managed bean and handle the response to display in a popup window?

推荐答案

只是为了添加到 Kishor 的(中途)答案，您需要在您的视图中有一个待更新的组件(如您所称的弹出窗口)和请求成功完成后进行ajax更新.

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.

您可以使用远程命令发送带有附加参数的 AJAX 请求，并 ajax-update 负责作为弹出窗口的 JSF 组件.像这样(对于 PrimeFaces 3.x):

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):

<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:

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:

<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
    }

}

这篇关于如何通过 JavaScript 调用带有参数的托管 bean 方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！