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

javascript ajax java jsf jsf-2

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 类。仅此而已。