使用AJAX的JSF表单post

我希望下面的表单使用AJAX。因此，在单击命令按钮后会显示注释，而无需重新加载页面。使用JavaServerFaces2.0需要更改什么

功能：此表单提供一个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>

---

您需要修改按钮：

<h:commandButton value="read" action="#{commentManager.findByTopic}">
    <f:ajax render="comments" />
</h:commandButton>

---

这意味着，当单击按钮时，将执行操作，并呈现和更新

数据表。这仅在支持bean至少在视图范围内时有效。
您需要告诉命令按钮改用Ajax。这就像在里面嵌套一个标签一样简单。您需要指示它通过
execute=“@form”
提交整个表单，并通过
render=“comments”
呈现ID为
comments
的元素

另见：



请注意，只有当JSF已经将datatable呈现给客户端时，这种方法才有效。否则JavaScript在HTML DOM树中找不到需要更新的元素。在这种特殊情况下，datatable具有
呈现的
属性，当第一次请求表单时，该属性的值似乎为
false:）添加的panelGroup完成了任务。我还需要将
execute=“topic”
添加到
f:ajax
，因为
{commentManager.findByTopic}
需要
{commentManager.topic}
。
<h:commandButton value="read" action="#{commentManager.findByTopic}">
    <f:ajax execute="@form" render="comments" />
</h:commandButton>

<h:head>
    ...
</h:head>

<h:panelGroup id="comments">
    <h:dataTable rendered="#{not empty commentManager.comments}">
        ...
    </h:dataTable>
</h:panelGroup>