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中调用自定义操作.
• 使用raw 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的字段中.

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