JSF頁面中使用js函數回調后台action方法

　　最近遇到了一個問題就是在JSF頁面中嵌入html頁面，這個html頁面中很多功能是使用js動態生成的，現在需要在js函數里想去調用JSF中action類method()方法並動態傳送數據給后台進行處理。找了很多jsf組件資料，發現 a4j:jsFuction 進行動態傳值很方便很快捷，不用寫 actionListener 監聽器去監聽傳值給bean方法。

　　a4j:jsFuction的有趣在於，它提供了一個客戶端request前，和request后的js功能的截取添加。為了理解這個概念。首先，把a4j:jsFuction看作一個js fuction.名字由name屬性來定義。如果我們給這個js fuction添加參數的話，可以在a4j:jsFuction里面加上 f:param作為一個函數參數。a4j:jsFuction主要是加了個js的功能外殼。（必須注意的是，它必須在一個form里)。我們可以通過oncomplete這個屬性，來使用從server端來的返回值作為任意js函數的參數，並調用這個js函數。如果頁面有需要update的控件的話，還可以用reRender屬性來重新render一下各別需要更新的頁面控件。

　　在xhtml頁面Button按鈕調取嵌入h5頁面如下：

<a4j:commandButton value="播放" styleClass="formBox_commonButton" reRender="videoReportModelPanel"
    action="#{action.getVideoFileName(item.id)}" onclick="initPlayer();"
    oncomplete="Richfaces.showModalPanel('videoReportModelPanel');"/>

　　JS進行處理：

function initPlayer(){
    .......
    //初始化頁面
    .......
}

......

//頁面特殊功能調用
function putJsFuction(data1,data2){
    var base64Str = data1;
    var vedioId = data2;
    transparm(vedioId,base64Str);
}

　　JS處理完業務邏輯后，要把處理的結果傳到<a4j:jsFunction>當中。

　　注：transparm 對應 a4j:jsFunction 中 name 屬性，倆個參數對應 f:param 中 name 屬性。傳多少個參數可以自己定義。

　　嵌入頁面需要的JSF代碼：

<h:form id ="jsFunctionForm">
    <a4j:jsFunction name="transparm"  immediate="true"  action="#{action.method()}">
         <f:param  name="vedioId"/>
         <f:param  name="base64Str"/>
    </a4j:jsFunction>
</h:form>

　　該 transparm 處發后 jsFunction 會自動調用 action。

　　后台接收method()方法：

public void method(){
    String vedioId = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("vedioId");
    String imgdata = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("imgdata");
    
    //后續邏輯處理
    
}

　　經過上面處理之后就可以把兩個參數傳到后台 action 當中了，在 method() 當中獲取兩個參數的方法如上，取到這兩個參數你你就可以隨意做后台處理了