JSF页面中使用js函数回调后台action方法

时间：2023-03-08 20:26:54

　　最近遇到了一个问题就是在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() 当中获取两个参数的方法如上，取到这两个参数你你就可以随意做后台处理了

相关文章