如何使用 ajax 更新 JSF 数据表答案

【问题标题】：How to Update JSF datatable using ajax如何使用 ajax 更新 JSF 数据表
【发布时间】：2013-03-02 07:51:20
【问题描述】：

我通过按下命令按钮使用数据表动态添加输入文本，但每次添加行时页面都会刷新，我如何在数据表中添加一行而不使用 ajax 刷新页面。这是代码

<h:form>

    <h:dataTable id="table" value="#{dataTableBean.cities}" var="city">
        <h:column>
            <f:facet name="header">
                <h:outputText value="City name" />
            </f:facet>
            <h:inputText value="#{city}" />
        </h:column>
    </h:dataTable>

    <h:commandButton value="Add one more city" id="ajax" update="table"
        actionListener="#{dataTableBean.enlargeList}" />
    <h:commandButton value="Submit" actionListener="#{dataTableBean.processList}" />
</h:form>

【问题讨论】：

您混淆了 Primefaces UI 组件 (p) 和标准 JSF 组件 (h)。查看两个命令按钮的文档，找出差异，如果您有其他问题，请回复。
另外，请务必了解 action 和 action listener 之间的区别，例如，在这个很好的答案：Differences between action and actionListener.

标签： ajax jsf-2 primefaces

【解决方案1】：

就它应该是一个工作练习而言，发布任何接近答案的内容都会损害 OP 对该主题的理解。

所以，我会给出一些提示，以便 OP 自己解决问题。

您混淆了 Primefaces UI 组件，其标签以 <p:...> 和标准 JSF UI 组件 <h:...> 开头。关于您的示例，有<h:commandButton> 和<p:commandButton>。至于 Primefaces 组件旨在为用户提供更方便的界面，在 Primefaces 对应的标准命令按钮中有一些附加属性。发现它们并注意 AJAX 规范。仔细查看 ajax 和 update 属性。
<f:ajax> 标签为实现ClientBehaviorHolder 接口的UIComponents 启用ajax 行为。类似地，<p:ajax> 标签在一些增强功能上基本相同，并被 Primefaces 组件使用。例如，可以在 <h:commandButton>/<p:commandButton> 中使用这些标签，并指定该组件的 ajax 行为。注意<f:ajax> 的execute/render 属性和/或process/update 的<p:ajax> 属性。这样，命令按钮不会触发标准表单提交，而是会触发 AJAX 调用。
一定要了解命令按钮的action和action listener之间的区别。后者旨在执行一些小调整（记录/访问调用者的属性/调整某些属性等），而前者用于执行业务操作（保存/删除/更新等）。很好的开始是阅读Differences between action and actionListener。

最后，请确保不要混淆代码中的输入和输出组件。

最后，咨询一个好的信息来源是一个非常好的主意。您可以从官方文档（Primefaces documentation、Oracle's tutorial on Java EE 6）开始，然后继续使用可靠的信息来源。我的个人偏好来自以下（出色的）来源：BalusC tutorials on Java EE in general and JSF in particular、Marty Hall's tutorials on a wide spectrum of subjects within Java 和 Mkyong's tutorials, covering concrete problems within Java EE，如果您需要具体示例。

【讨论】：