java - JSF 2.0 AJAX : Call a bean method from javascript with jsf. ajax.request(或其他方式)

Question

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

问题:我打算用jsf.ajax.request 发送字符串，但它不直接支持对bean 的调用方法。如何以 AJAX 方式使用 JSF 调用 bean 中的方法？

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

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

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

我错过了什么吗？你是怎么做到这些的？

有一个quite similar question ，但给出的答案仅涉及基于 XML 的 AJAX 调用。还有another similar question ，但这也指的是基于 XML 的 AJAX 调用。

Answer 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>

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

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

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

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

这是对我的案例的简化，但应该可行。不过，仍在寻找更方便的方法。