从javascript中的托管bean获取返回值

Question

在我的应用程序中，我调用了一个 Javascript 事件，该事件调用了一个名为 checkPageLayoutsAreSelected 的 p:remoteCommand，如下所示：

$('selector').on('click', function (e) {
  checkPageLayoutsAreSelected();
});

这是p:remoteCommand：

<p:remoteCommand name="checkPageLayoutsAreSelected" actionListener="#{beanFormDashboard.checkPageLayoutsAreSelected}" />

这个p:remoteCommand 将调用beanFormDashboard 托管bean 中的一个方法，该方法将返回一个布尔值：

public Boolean checkPageLayoutsAreSelected(){
    for(DashboardPage dp : dashboardPageList){
        if(dp.getModel() == 0){
            return false;
        }
    }
    return true;
}

所以我想从 Javascript 代码中的托管 bean 中获取 checkPageLayoutsAreSelected() 的返回值。

类似这样的：

$('selector').on('click', function (e) {
  var returnedValue = checkPageLayoutsAreSelected();
});

我该怎么做？

Answer 1

checkPageLayoutsAreSelected 不返回值，甚至不返回承诺，但您可以 Ajaxicaly 返回值。

<p:remoteCommand name="checkPageLayoutsAreSelected"
     action="#{beanFormDashboard.checkPageLayoutsAreSelected()}"
     oncomplete="getLayoutAreSelectedResult(xhr, status, args);"
/>

在checkPageLayoutsAreSelected() 方法中，您使用PF 提供的RequestContext 将结果发送回客户端：

public void checkPageLayoutsAreSelected() {
   Boolean result=true;
   for(DashboardPage dp : dashboardPageList){
        if(dp.getModel() == 0){
            result= false;
        }
   }
   RequestContext reqCtx = RequestContext.getCurrentInstance();        
   reqCtx.addCallbackParam("returnedValue", result);
}

并且在 Javascript 回调函数getLayoutAreSelectedResult(xhr, status, args) 中你将得到返回值：

$('selector').on('click', function (e) {
    checkPageLayoutsAreSelected();
    window.getLayoutAreSelectedResult= function(xhr, status, args) {
       var returnedValue = args.returnedValue;
       console.log(returnedValue);
    }
});

Answer 2

另一个答案有效，并为您提供完整的 xhr 访问权限，但理论上您可以随时执行此操作，将某些内容放入 requestScope 并重新渲染，然后将其从 EL 中拉出。就我个人而言，我更喜欢让元素在页面上可见，因为我们以后可能会将它们用于任何类型的信息，但这是另一种方式。参考您的 bean 数据设置一个隐藏元素，并将其包装为一个可用于重新渲染的组件。

然后在您的 checkPageLayoursAreSelected 中，在 bean 上设置该对象的值，并让 remoteCommand 渲染/更新您元素的组件包装器，然后使用基本的 JS 或 Jquery 从 dom 获取值.

工作示例：

view.xhtml

  <button type="button" id="buttonClicker" class="buttonClicker" >Click Me</button>

  <p:remoteCommand name="checkPageLayoutsAreSelected" actionListener="#{testBean.checkPageLayoutsAreSelected}" update="pageLayoutSelected" oncomplete="showVal()"/>

  <h:panelGroup id="pageLayoutSelected">
       <h:inputHidden  value="#{testBean.pageLayoutSelected}" id="checkPageLayoutValueId" />
  </h:panelGroup>

  <script>
    $('.buttonClicker').on('click', function (e) {
         checkPageLayoutsAreSelected();
    });
    function showVal() {
        alert($("[id$='checkPageLayoutValueId']").val());
    };
  </script>

TestBean.java

    private Boolean pageLayoutSelected;

    public Boolean checkPageLayoutsAreSelected(ActionEvent event) {
        if (pageLayoutSelected == null || pageLayoutSelected == Boolean.FALSE) {
            pageLayoutSelected = Boolean.TRUE;
        } else {
            pageLayoutSelected = Boolean.FALSE;
        }

    return pageLayoutSelected;
}
getters/setters

我添加了一条提醒，显示数据=已被修改。

重要的是，您可能需要在 oncomplete 阶段执行此操作 - 因为它绝对确定 dom 渲染已经完成，如果 JS 运行得足够快，onsuccess DOM 可能仍然具有较旧的值。

希望这会有所帮助。