Ajax渲染后POST请求中javax.faces.ViewState参数重复问题排查

成因分析 #

• 重复表单或错误渲染范围：页面存在多个<h:form>标签，或者Ajax渲染的区域包含完整的表单标签，导致渲染后页面中出现多个带有ViewState隐藏域的表单，POST时就会提交不同的ViewState值。
• 组件树状态不一致：当使用server端状态保存时，如果Ajax请求前后组件树结构意外变化（比如动态组件的创建/销毁逻辑出错），JSF会生成新的ViewState，但旧的ViewState隐藏域未被清理，留在页面中。
• Ajax渲染目标不当：若Ajax渲染的是包含原有表单的父容器，原有表单的ViewState隐藏域未被正确替换，反而新增了一个新的ViewState，造成重复提交。

修复方案 #

• 规范表单结构：确保页面中只存在一个<h:form>，或者Ajax仅渲染表单内部的局部内容，避免渲染完整的表单标签。
• 调整渲染目标：将Ajax的渲染目标改为表单内的具体组件或容器（比如<h:panelGroup>），让最外层表单统一管理ViewState，避免重复生成。
• 修正组件树逻辑：检查动态组件的创建/销毁代码，保证Ajax请求前后组件树结构稳定，避免不必要的状态变化触发新ViewState生成。
• 临时脚本处理（不推荐作为首选）：如果上述方法暂时无法生效，可在Ajax请求完成后用JS移除多余的ViewState：

  document.querySelectorAll('input[name="javax.faces.ViewState"]').forEach((el, index) => {
    if (index > 0) el.remove();
  });
  

内容的提问来源于stack exchange，提问作者NeKitKat