JSF 2.0 AJAX：使用jsf.ajax.request（或其他方式）从javascript调用bean方法

Question

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

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

至少有两种解决方法：

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

两种方式都很笨拙，后者也突破了JSF的范围。

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

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

Answer 1

我无法找到如何使用javascript直接调用bean，但这里有一个关于从javascript调用f：ajax-declaration的hack：

1）创建一个隐藏表单，其中包含要发送到服务器的所有数据的字段。 包括啊：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的字段中。

这是我案例的简化，但应该有效。 尽管如此，仍在寻找更有条理的方法。

Answer 2

我做了好几次这个任务。 哟不需要多重隐藏的诅咒。 您只能使用一个隐藏字段，通过JSON.stringify将所有输入值转换为JSON对象并设置为此字段。 在服务器端 - 将JSON对象（有许多Java库）反序列化为Java类。 就这样。