通过链接或后退按钮打开时强制 JSF 刷新页面/视图/表单

Question

我有一个 JSF 页面，它将数据发布到外部页面。 数据从 JSF 托管 bean 加载，该 bean 在发布数据中生成唯一的 ID。

我遇到一个问题，用户单击结帐按钮，然后导航回同一页面并再次按结帐按钮。帖子数据尚未更新。而且，根本没有调用该 bean。有没有办法强制 JSF 重新加载页面和表单数据？

<form action="#{checkoutBean.externalUrl}" method="post"
    id="payForm" name="payForm">
       <input type="hidden" value="#{checkoutBean.uniqueID}" />
       <input type="submit" value="Proceed to Checkout" />
</form>

Answer 1

该页面可能是从浏览器缓存加载的。这本质上是无害的，但确实让最终用户感到困惑，因为他/她错误地认为它确实来自服务器。您可以通过查看浏览器 Web 开发人员工具集中的 HTTP 流量监视器轻松确认这一点（在 Chrome/FireFox23+/IE9+ 中按 F12 并检查“网络”部分）。

您基本上需要告诉浏览器不要缓存（动态）JSF 页面。这样，浏览器将实际向服务器请求该页面（并由此触发托管 Bean 的正确创建/初始化等），而不是从其缓存中显示先前请求的页面。

通常，这是通过一个简单的 servlet 过滤器 来完成的，如下所示：

@WebFilter("/app/*")
public class NoCacheFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;

        if (!request.getRequestURI().startsWith(request.getContextPath() + ResourceHandler.RESOURCE_IDENTIFIER)) { // Skip JSF resources (CSS/JS/Images/etc)
            response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
            response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
            response.setDateHeader("Expires", 0); // Proxies.
        }

        chain.doFilter(req, res);
    }

    // ...
}

其中

/app/*

是您要关闭浏览器缓存的示例 URL 模式。如果需要，您可以将其映射到

/*

、

*.xhtml

甚至

servletNames={"Faces Servlet"}

。

如果您碰巧使用 JSF 实用程序库 OmniFaces，那么您只需将以下条目添加到 CacheControlFilter

 即可使用其内置 

web.xml（这演示了

FacesServlet

上的直接映射，这意味着每个动态 JSF页面不会被缓存）：

<filter>
    <filter-name>noCache</filter-name>
    <filter-class>org.omnifaces.filter.CacheControlFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>noCache</filter-name>
    <servlet-name>facesServlet</servlet-name>
</filter-mapping>

另请参阅展示。

Answer 2

我找到了一个适用于 JSF 的解决方案，而无需创建 servlet-filter。只需将下面的行放入您的 .xhtml 页面即可。

<f:event type="preRenderView" listener="#{facesContext.externalContext.response.setHeader('Cache-Control', 'no-cache, no-store')}" />

Answer 3

您可以通过在单击按钮时调用的方法末尾添加以下代码行来轻松刷新页面：

Faces.refresh();