JSF页面中使用js函数回调后台bean方法并获取返回值的方法

某些情况下,在开发jsf项目时,我们需要必须使用html组件来达到一些使用Jsf组件不能达到的目标。例如有时候我们希望,当触发某些html 组件或标签时,触发后台方法甚至接收后台方法传过来的返回值。这回让我们很头疼,因为primefaces并没有给我们说如何使用js来调用后台bean 方法。那么,我们就需要结合js和jsf同时才可以达到这个目的。

达到这个目的又两个方法。

1 使用jsf的inputHidden标签

这几乎算不上真正的js调用后台的方法,因为它无法向后抬bean传递值,但是简单的后台向页面传递数据可以使用这个方法


首先,在jsf中触发某个组件时,要及时update这个inputHidden标签,例如下面的组件


    
    
    

这里面的组件就会当这个下拉值变化时,就会触发后台的方法

onModuleChange()

当,方法结束后,它会update(刷新)这个

h:inputHidden

如果你的这个inputHidden中的值是随下拉的变化和变化的呢,那么,你就可以在任何的js函数中获取到这个inputHidden中的值,然后进行处理,

function getVlue() {
    /* document.getElementById("commBtn").onclick; */
    alert("a");
    var aliaColums = document.getElementById("input").value;
    dataJson = eval("(" + aliaColums + ")");
        addqueryroot('.query', true);
}

我这里的inputHidden 盛的是一个json格式的字符串,我通过js函数就可以动态的获取这个json,进而进行其他的操作。当然,可以在任何html标签中调用这个js函数,然后获取这个json字符串。

2 使用commandButton来达到复杂的异步刷新取值

在这里说下,普通的html标签结合js函数结合commandButton可以达到什么效果呢?那就是在你触发任何html标签时,你都可以通过 这个commandButton组件来将你在html标签中选定的值传递到后台,经过后台bean处理后,它会返回处理结果,js函数就可以接收到这个处 理结果,然后再将这个结果整合到其他的组件中。

首先,创建这个隐藏的commandButton,注意,这个commandButton本身不具有隐藏的属性,可以通过其他有隐藏属性的组件将其 包裹,以达到隐藏的目的,我通过一个div来达到这个目的。在这个commandButton中,我们发现,action的作用就是当点击这个 commandButton时,它会调用后台方法,而attribute中的name 属性和value属性的作用会在下面将。


然后我们需要一个普通的html标签,就以一个普通的html button为例:


然后写一个js函数,来连接这个普通的button和jsf组件commandButton

function test() {
    $('#command').click();
}

这个函数的意思就是,当你点击这个"回调测试"的按钮时,它就相当于触发了jsf的cimmandButton按钮,这时,commandButton中的两个


中的两个属性就会自动绑定成一个类似于map形式的数据,name属性的值作为key,value中的值作为map中的value,它们将会被传递至后台。

然后,后台的bean 中需要有方法来接收两个值:

public void testReturn(ActionEvent event) {
    String attrvalue1 = (String) event.getComponent().getAttributes()
        .get("attrname1");
    String attrvalue2 = (String) event.getComponent().getAttributes()
        .get("attrname2");
    System.out.println(attrvalue1);
    System.out.println(attrvalue2);
    RequestContext requestContext = RequestContext.getCurrentInstance();
    requestContext.addCallbackParam("isValid", true);

}

在上面的代码中,我们可以看到,java程序已经成功的接收前端页面传过来的值,它最后也返回了一个类是于map格式的值,key为:isValid,value 为:true

最后,我们要写一下页面如何接收后台传递过来的值:


接下来,就会发现不仅仅后台可以正常打印出前端页面中的那两个值,同时前端的js函数也可以打印出后台传过来的值,当然,同样的,从前端传递到后台的值的个数和形式,你可以自己改,同时从后台接收到的数据,你也可以随意的进行任何操作。

但是请注意,这个

p:commandButton

组件有个问题,就是你不可以动态的通过js函数来将一些值赋给这个组件,但是这个组件里的值可以接受后台的属性值


这样其实也并没有达到我们想要通过js来传给后台bean的目的,接下来的方法,就可以完全达到通过js动态的传值给后台bean方法,bean方法处理完返回数据给js。

3 使用p:remoteCommand来达到复杂的异步刷新取值

大家请注意,这个方法可以真正的解决在jsf中通过js调用后台bean方法并获取bean方法返回值的问题。

同样,首先我们要写两个jsf组件,来和后台bean结合


    

解释一下,上面的的这个inputHidden的作用是接收后台bean处理后的返回值。remoteCommand的作用是将js中的动态的值传递到后台bean方法。


                    
                    

你可能感兴趣的:(jsf+primefaces)