如何在JSF 2中进行双击预防

Question

我们有一些针对大量数据运行的搜索页面需要一段时间才能完成.当用户点击搜索按钮时,我们不希望他们第二次提交搜索结果.

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

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

Answer 1

如果您只使用ajax请求,则可以使用jsf.ajax.addOnEventJSF 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()hack在点击后约50ms禁用按钮.

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

这只是相当脆弱.慢客户端可能太短了.您需要增加超时或前往另一个解决方案.

也就是说,请记住,这只会阻止在通过网页提交时提交双重提交.这不会阻止程序化HTTP客户端(如URLConnectionApache HttpClient,Jsoup等)提交双重提交.如果要在数据模型中强制实施唯一性,则不应阻止双重提交,而是防止双重插入.这可以通过在UNIQUE感兴趣的列上设置约束来轻松实现.

也可以看看:

• 用于双重提交预防的纯Java/JSF实现
• 如何在呈现响应之前处理多个提交？