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的范围。

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

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

Answer 1

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

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的字段中。

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

Answer 2

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

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

2 个答案: