如何使用JavaScript通過參數調用託管Bean方法

Question

我正在開發一個Web應用程序，並使用JSF和PrimeFaces框架和外部地理地圖API。

當我點擊地圖上的POI時，Map API會給我POI_id。但對我來說這還不夠，我想從一個servlet獲取關於POI的信息並將其顯示在彈出窗口中。 （如地址，姓名，電話號碼等字段）。

因此，當我點擊地圖上的POI時，我需要向託管bean中的servlet發送HTTP請求。

我可以得到poi_id，但是我無法將此ID發送到後端託管bean，因此獲取POI信息似乎不可能。

如何將poi_id發送到我的託管bean並處理響應以在彈出窗口中顯示？

Answer 1

只需添加到基肖爾的（半）的答案，你需要有一個待更新組件在您的視圖（彈出窗口，正如你所說的話）和Ajax的更新請求已成功後，完成。

您可以使用遠程命令發送帶有附加參數的AJAX請求，並且ajax更新負責成爲彈出窗口的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); 
} 

使用遠程命令的另一種方法是有一個隱藏的形式與將被用於發送所述參數給所述背襯豆一個隱藏的輸入，能夠

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

與

：根據您的 poi_id從其他豆類分開來處理的必要信息的檢索

@ManagedBean 
@RequestScoped 
public class PoiBean { 

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

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

} 

Answer 2

您可以使用PrimeFaces remote command component（<p:remoteCommand>）。

RemoteCommand支持執行backing bean方法並執行由自定義客戶端腳本觸發的部分更新 。從事件處理程序

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

或調用它像這樣：

將它添加到在下面的方式的觀點吧：

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

而且使用它在Javascript中，像這樣

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