带有 AJAX 的 JSF 表单发布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6472016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JSF form post with AJAX
提问by Matthias
I want the following form to use AJAX. So the comments are shown after clicking the command button and without reloading the page. What needs to be changed, using Java Server Faces 2.0?
我希望以下表单使用 AJAX。因此，单击命令按钮后会显示注释，而无需重新加载页面。使用 Java Server Faces 2.0 需要改变什么？
Functionality: This form provides an inputText to define a topic. After pressing the commandButton, it is searched for comments regarding this topic. Comments are shown in a dataTable, if there are any. Otherwise Emptyis shown.
功能：这个表单提供了一个 inputText 来定义一个主题。按下 commandButton 后，将搜索有关此主题的评论。注释显示在数据表中（如果有的话）。否则显示为空。
<h:form id="myForm">
<h:outputLabel value="Topic:" for="topic" />
<h:inputText id="topic" value="#{commentManager.topic}" />
<h:commandButton value="read" action="#{commentManager.findByTopic}" />
<h:panelGroup rendered="#{empty commentManager.comments}">
<h:outputText value="Empty" />
</h:panelGroup>
<h:dataTable
id="comments"
value="#{commentManager.comments}"
var="comment"
rendered="#{not empty commentManager.comments}"
>
<h:column>
<h:outputText value="#{comment.content}"/>
</h:column>
</h:dataTable>
</h:form>
回答by BalusC
You need to tell the command button to use Ajax instead. It's as simple as nesting a <f:ajax>tag inside it. You need to instruct it to submit the whole form by execute="@form"and to render the element with ID commentsby render="comments".
您需要告诉命令按钮改用 Ajax。就像在其中嵌套<f:ajax>标签一样简单。您需要指示它提交整个表单 byexecute="@form"并呈现 ID 为commentsby的元素render="comments"。
<h:commandButton value="read" action="#{commentManager.findByTopic}">
<f:ajax execute="@form" render="comments" />
</h:commandButton>
Don't forget to ensure that you've a <h:head>instead of a <head>in the master template so that the necessary JSF ajax JavaScripts will be auto-included.
不要忘记确保在主模板中使用a<h:head>而不是 a<head>以便自动包含必要的 JSF ajax JavaScript。
<h:head>
...
</h:head>
Also, the element with ID commentsneeds to be alreadyrendered to the client side by JSF in order to be able to be updated (re-rendered) by JavaScript/Ajax again. So best is to put the <h:dataTable>in a <h:panelGroup>with that ID.
此外，带有 ID 的元素comments需要已经被 JSF 渲染到客户端，以便能够再次被 JavaScript/Ajax 更新（重新渲染）。所以最好是用那个 ID放入<h:dataTable>一个<h:panelGroup>。
<h:panelGroup id="comments">
<h:dataTable rendered="#{not empty commentManager.comments}">
...
</h:dataTable>
</h:panelGroup>
See also:
也可以看看：
回答by Bj?rn Pollex
You need to modify your button:
您需要修改您的按钮：
<h:commandButton value="read" action="#{commentManager.findByTopic}">
<f:ajax render="comments" />
</h:commandButton>
This means, when the button is clicked, the action is executed, and the dataTablewill be rendered and updated. This only works if the backing bean is at least view-scoped.
这意味着，当按钮被点击时，动作被执行，并且dataTable将被渲染和更新。这仅在支持 bean 至少是视图范围的情况下才有效。
