使用 AJAX 的 JSF 表单发布
Posted
技术标签:
【中文标题】使用 AJAX 的 JSF 表单发布【英文标题】：JSF form post with AJAX 【发布时间】：2011-09-22 06:08:09 【问题描述】：我希望以下表单使用 AJAX。因此，在单击命令按钮后会显示 cmets，而无需重新加载页面。使用 Java Server Faces 2.0 需要更改哪些内容？
功能：这个表单提供了一个 inputText 来定义一个主题。按下 commandButton 后，将搜索有关此主题的 cmets。注释显示在数据表中（如果有）。否则显示空。
<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>
【问题讨论】：
【参考方案1】：您需要告诉命令按钮使用 Ajax。就像在其中嵌套一个<f:ajax> 标签一样简单。您需要通过execute="@form" 指示它提交整个表单，并通过render="comments" 渲染ID 为comments 的元素。
<h:commandButton value="read" action="#commentManager.findByTopic">
<f:ajax execute="@form" render="comments" />
</h:commandButton>
不要忘记确保您在主模板中使用 <h:head> 而不是 <head>，以便自动包含必要的 JSF ajax javascript。
<h:head>
...
</h:head>
此外，ID 为comments 的元素需要已经由 JSF 渲染到客户端，以便能够再次被 JavaScript/Ajax 更新（重新渲染）。所以最好将<h:dataTable> 放在具有该ID 的<h:panelGroup> 中。
<h:panelGroup id="comments">
<h:dataTable rendered="#not empty commentManager.comments">
...
</h:dataTable>
</h:panelGroup>
另见：
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"【讨论】：
添加的 panelGroup 完成了这项工作。我还需要将execute="topic" 添加到f:ajax，因为#commentManager.findByTopic 需要#commentManager.topic。【参考方案2】：
你需要修改你的按钮：
<h:commandButton value="read" action="#commentManager.findByTopic">
<f:ajax render="comments" />
</h:commandButton>
这意味着，当点击按钮时，动作被执行，dataTable 将被渲染和更新。这仅在支持 bean 至少是视图范围的情况下才有效。
【讨论】：
请注意，这仅适用于数据表已经由 JSF 呈现给客户端的情况。否则 JavaScript 在 html DOM 树中找不到需要更新的元素。在这种特殊情况下，数据表具有rendered 属性，该属性似乎在第一次请求表单时评估false :)以上是关于使用 AJAX 的 JSF 表单发布的主要内容，如果未能解决你的问题，请参考以下文章
JSF 2.2 - 文件上传不适用于 Ajax。表单的编码类型似乎不正确（仅通过 AJAX）
PrimeFaces 4.0/JSF 2.2.x 中的文件上传不适用于 AJAX - javax.servlet.ServletException：请求内容类型不是多部分/表单数据