自定义 javascript Ajax 调用后刷新 JSF 组件答案

【问题标题】：Refresh JSF component after custom javascript Ajax call自定义 javascript Ajax 调用后刷新 JSF 组件
【发布时间】：2012-12-15 14:23:11
【问题描述】：

我的 jsf 页面中有一个自定义的 javascript Ajax 调用。我在过滤器中捕获并处理 XMLHttpRequest 的查询字符串。过滤器将记录添加到模型中的表中。现在，我希望 jsf 页面在不刷新整个页面的情况下，在其中一个组件（Primefaces 数据表）中反映更新后的模型。

我想我需要的是一个自定义的 xmlHttpResponse...

谁能告诉我怎么做？我害怕它可能会很复杂，但我别无选择，只能使用自定义 javascript...

【问题讨论】：

使用<p:commandButton action="doProcess()" update="yourDataTableID">（带有 ajax 调用）而不是您的自定义 ajax 调用有什么区别？也许您的问题是使用<p:commandButton>（或<p:commandLink>）方式。
请在此处发布您已完成的工作以及您尝试通过自定义 ajax 调用实现的目标。Ajax 是人们使用 primefaces/JSF 的 75% 的原因。如果您要进行自定义 ajax 调用，那有什么意义呢？
@kolossus 对于我所做的大部分工作，标准的 JSF 东西都很好用。但是，我有一个很大的文本区域，其中有一个用于语言学习的英语文本。如果学生点击一个单词，该单词就会被添加到他们的“学习列表”中。因此，在单个 jsf 组件中包含许多单词，每个单词都与一个 javascript ajax 调用相关联，该调用将单词和一些附加信息发送到服务器以附加到数据库表“learninglist”。学习列表出现在右侧的dataTable中，需要刷新！

标签： ajax jsf

【解决方案1】：

PrimeFaces <p:remoteCommand> 就是为此目的而设计的。

以下是针对您的特定案例的基本启动示例：

<h:form>
    <p:remoteCommand name="updateTable" action="#{bean.updateTable}" 
        process="@this" update="table" />
    ...
    <p:dataTable id="table">...</p:dataTable>
</h:form>

它会生成一个 JS 函数 updateTable()，它将调用 #{bean.updateTable} 方法并使用（相对）客户端 ID table 更新组件。您只需在 JavaScript 上下文中调用函数 updateTable()。

updateTable();

如果需要，你甚至可以传递请求参数，它必须作为 JS 对象发送：

updateTable({ name1: "value1", name2: "value2 });

无需摆弄自制的 ajax 请求并保持 JSF 状态同步。

【讨论】：

所以@BalusC 如果我理解正确，我可以在页面上包含另一个表单，其中包含标记，它将替换我的自定义 ajax 调用。因此，我没有将每个单词附加到 ajax 函数，而是将每个单词附加到一个函数，该函数 1) 更新选项卡中的参数值，2) 提交封装选项卡。对吗？
太棒了，我完成了！我刚刚离开现有的过滤器（和自定义 ajax 调用）来更新模型。然后，在自定义的 ajax javascript 中，我调用了 remoteCommand 生成的 javascript 来更新数据表。奇迹般有效。我差点从椅子上摔下来！谢谢@BalusC。
有没有办法用简单的 JSF/JS 做到这一点？理想情况下没有虚拟按钮。