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

Question

我必须在JSF页面中使用HTML组件，例如下拉组件。我想实现这个目标:当我点击下拉菜单时，所选的值将传递给后台bean的方法，然后接收该方法处理的结果，并且可以接收传递给其他js函数的值。

Answer 1

好吧，这不是小事，您将失去 JSF 的魅力，但这是有可能的。我将指导您如何通过使用PrimeFaces来实现这些目标。图书馆和<p:remoteCommand>组件:

要从 javascript 调用 JSF bean 方法，您可以使用 Primefaces 的 <p:remoteCommand/> ，例如:

<script>
   function processResult(){
       //...grab result from hidden-result field by JavaScript or jQuery
   }


    function makeSelection(){
    //...code to get selected value via javascript or jQuery

       processSelection([{name:'selected', value:'<selected value>'}]);
    }
</script>
<p:remoteCommand name="processSelection" action="#{bean.processSelected}" update="hidden-result" oncomplete="processResult();" />



 <h:outputText id="hidden-result" value="#{bean.result}" style="display:none;"/>

您调用 JavaScript 函数 makeSelection它获取选定的值并将其传递给 bean。然后它用 id='hidden-result' 更新字段完成后它将调用函数 processResult您应该通过 JavaScript 或 jQuery 从该字段获取值，无论您想要什么，都可以使用它。

要在支持 bean 中接收这些参数，您应该使用以下代码:

public void processSelected() {
    String selectedValue = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("param");  
   //... make whatever you want with the selected value
   result = "Result from process by JSON or plain text";
}

首先获取传递的参数，然后进行处理并将结果应用到 result连接到 <h:outputText/> 的 value 参数

请注意，我没有检查此代码，它可能包含拼写错误

我还建议您看看以下问题:

1. Pass parameter to p:remoteCommand from JavaScript
2. How to select JSF components using jQuery?
3. how to get managed bean property value inside javascript?