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

 

posted on 2017-11-22 16:13 Monkey丶军 阅读(…) 评论(…) 编辑 收藏

版权声明：本文为houlijun原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：http://www.cnblogs.com/houlijun/p/7879725.html