JSF 2.0 AJAX:使用 jsf.ajax.request(或其他方式)从 javascript 调用 bean 方法

2022-09-04 20:45:25

一些背景知识:我正在构建一个自定义的 JSF 组件。该组件基本上是一个文本编辑器,它应该有一个“保存”按钮,用于保存编辑器的内容字符串。由于我正在使用CodeMirror库,因此我需要使用javascript从编辑器中获取内容(字符串)并将其发送到服务器。因此,在这种情况下,我不能使用基于XML的JS调用,例如.f:ajax

问题是:我打算随 一起发送字符串,但它不直接支持在 bean 上调用方法。如何以AJAX方式使用JSF调用Bean中的方法?jsf.ajax.request

至少有两种方法可以解决这个问题:

  • 将隐藏的表单包含在具有隐藏输入字段的页面中。从javascript更新该输入字段,然后调用jsf.ajax.request来发布该表单。如果需要,可以在属性的 getter 或 setter 中调用自定义操作。
  • 使用 raw(或者可能在其他 JS 库的帮助下)执行请求。创建一个 servlet 并调用它。XMLHttpRequest

这两种方式都很笨拙,后者也超出了JSF的范围。

我错过了什么吗?你是怎么做到的?

有一个非常相似的问题,但给出的答案仅涉及基于 XML 的 AJAX 调用。还有另一个类似的问题,但这也涉及基于XML的AJAX调用。


答案 1

我无法找到如何使用javascript直接调用bean,但是这里有一个关于从javascript调用f:ajax-declaration的黑客:

1)创建一个隐藏的表单,其中包含要发送到服务器的所有数据的字段。同时包括一个 h:commandButton:

<h:form id="hiddenForm" style="display: none;">
    <h:inputHidden id="someData" value="#{someBean.someData}" />
    <h:commandButton id="invisibleClickTarget">
        <f:ajax execute="@form" listener="#{someBean.myCoolActionOnServer()}" />
    </h:commandButton>
</h:form>

像往常一样,在这种情况下,attribute 是指要在服务器上执行的方法。listener#{someBean.myCoolActionOnServer()}

2)在其他一些按钮中,用于调用您的特殊javascript并通过javascript单击触发器按钮:onclick

<h:commandButton value="Click me" onclick="populateTheForm('hiddenForm'); document.getElementById('hiddenForm:invisibleClickTarget').click(); return false;" />

populateTheForm()实际上应该将数据填充到hiddenForm的字段中。

这是对我的案例的简化,但应该有效。不过,仍然在寻找更方便的方法。


答案 2

我做过这个任务好几次。哟不需要多重隐藏。您只能使用一个隐藏字段,通过 JSON.stringify 将所有输入值转换为 JSON 对象并设置为此字段。在服务器端 - 将 JSON 对象(有很多 Java 库)反序列化为 Java 类。仅此而已。