jsf - 如何在 JSF 中防止双击

Question

我们有一些搜索页面需要运行大量数据，并且需要一段时间才能完成。当用户单击搜索按钮时，我们希望不允许他们再次提交搜索结果。

是否有在 JSF 中进行“双击”检测/预防的最佳实践？

PrimeFaces 组件似乎可以做我们想要的事情，因为它会在单击搜索按钮和搜索完成之间的一段时间内禁用 UI，但是我们可以使用更通用的策略(也许不依赖于 PrimeFaces 的东西)？理想情况下，在搜索完成之前，对该按钮的任何单击都将被禁用或忽略。我们不一定需要禁用整个 UI(因为 blockUI 允许您这样做)。

Answer 1

如果您仅使用 ajax 请求，则可以使用 jsf.ajax.addOnEvent JSF JavaScript API 的处理程序。以下示例将应用于 type="submit" 的所有按钮.

function handleDisableButton(data) {
    if (data.source.type != "submit") {
        return;
    }

    switch (data.status) {
        case "begin":
            data.source.disabled = true;
            break;
        case "complete":
            data.source.disabled = false;
            break;
    }    
}

jsf.ajax.addOnEvent(handleDisableButton);

或者，如果您仅在特定按钮上需要此功能，请使用 onevent <f:ajax> 的属性.

<h:commandButton ...>
    <f:ajax ... onevent="handleDisableButton" />
</h:commandButton>

如果您还需要在同步请求上应用此功能，那么您需要考虑在onclick期间禁用按钮时的情况。 ，然后按钮的 name=value对不会作为请求参数发送，因此 JSF 将无法识别该操作并调用它。因此，您应该仅在浏览器发送 POST 请求之后才禁用它。没有用于此目的的 DOM 事件处理程序，您需要使用 setTimeout()点击后约 50 毫秒禁用按钮。

<h:commandButton ... onclick="setTimeout('document.getElementById(\'' + this.id + '\').disabled=true;', 50);" />

这只是相当脆弱。对于速度慢的客户端来说，它可能太短。您需要增加超时时间或转向其他解决方案。

也就是说，请记住，这只能防止通过网页提交时的重复提交。这不会阻止编程 HTTP 客户端(例如 URLConnection)的双重提交、Apache HttpClient、Jsoup 等。如果您想在数据模型中强制执行唯一性，那么您不应该阻止重复提交，而应该阻止重复插入。这可以在 SQL 中通过输入 UNIQUE 轻松实现。对感兴趣的列的约束。

另请参阅:

• Pure Java/JSF implementation for double submit prevention
• How to handle multiple submits before response is rendered?