单击 JSF 中的按钮将输入文本值传递到服务器端答案

【问题标题】：passing input text's value to server side on click of a button in JSF单击 JSF 中的按钮将输入文本值传递到服务器端
【发布时间】：2014-04-10 06:33:43
【问题描述】：

我有一个带有搜索值的文本框，我想通过单击按钮将此字符串发送到服务器端。不是通过表单提交，而是通过 ajax 调用。

我在输入标签本身中添加了一个 actionListener，它在 blur 中调用。但我真正想要的是用户点击按钮触发搜索功能。

我从this问题中得到了一个想法，并以这种方式实现：

<h:inputText id="likeMaterial" value="#{createBookingForm.searchText}"></h:inputText>
<a4j:jsFunction name="setParameterAndRerender" actionListener="{bean.searchMaterials}" reRender="searchResult">
    <a4j:actionparam name="param1" assignTo="#{createBookingForm.searchText}"/> 
</a4j:jsFunction> 
<h:commandButton value="Search" onclick="setParameterAndRerender('mySearchText');return false;"></h:commandButton>

服务器端收到的值当然是“mySearchText”。我如何传递用户输入的内容？或者如何在调用按钮的动作监听器之前绑定#{createBookingForm.searchText}？

我愿意接受任何其他方法。不过我有一些限制：我正在努力增强一个使用 JSF 1.1 构建的遗留应用程序。我不能升级，至少不打架！

编辑：我尝试以this 的方式进行操作，但我在服务器端得到“未定义”。

【问题讨论】：

你不需要a4j:jsFunction来设置searchText的值（h:inputText就足够了）。您可以直接在您的h:commandButton 中调用操作。您的代码不起作用，因为您将错误的值传递给 jsFunction。您需要将onclick 属性更改为onclick="setParameterAndRerender('#{createBookingForm.searchText}');"。您的代码设计不佳，请尝试以其他方式进行。
我不能直接调用 commandButton 中的操作，因为那样会提交整个表单。我不想那样。我试过onclick="setParameterAndRerender('#{createBookingForm.searchText}');，但我在服务器端得到“未定义”。
使用a4j:commandButton。它可以在不提交表单的情况下执行一些操作。

标签： ajax jsf richfaces ajax4jsf jsf-1.1

【解决方案1】：

这就是完整的解决方案

<h:inputText id="likeMaterial" value="#{createBookingForm.searchText}"></h:inputText>
<a4j:commandButton reRender="searchResult" actionListener="#{createBookingForm.searchMaterials}">
    <a4j:actionparam name="param1" noEscape="true" value="document.getElementById('likeMaterial').value" assignTo="#{createBookingForm.searchText}" />
</a4j:commandButton>

【讨论】：

【解决方案2】：

为什么不使用a4j:commandButton 而不是h:commandButton？它将执行 ajax 请求并呈现您想要的内容。不会发生任何表单提交。看起来像你需要的。

【讨论】：

是的，这有帮助。我已将整个解决方案添加为另一个答案。以获得更好的格式。

【解决方案3】：

h:commandButton 默认点击时提交表单。因此无需使用a4j:jsFunction 或任何其他方式专门发送。除非您有其他事情要做，否则您可以完全删除您的 js 函数。如果您想测试添加一个操作方法并在 createBookingForm bean 中打印 searchText 变量的值。

希望这会有所帮助！

【讨论】：

我不想提交表单。正如我在我的问题中提到的，“不是通过表单提交，而是通过 ajax 调用。”