如何在存在正在进行的AJAX调用时阻止commandbutton提交表单

解决方法 #

方式1：最小改动拦截按钮点击（仅需修改一行代码） #

PrimeFaces 内置了AJAX队列状态检测方法，你直接修改「下一步」按钮的onclick逻辑，存在活跃AJAX请求时直接终止提交即可：

<h:commandButton value="#{messages['checkout.nextStep']}" id="nextStepBtn"  
    rendered="#{cartController.size() gt 0 and !clientContext.OCIRequest}"
    <!-- 仅修改这一行，新增AJAX活跃状态判断 -->
    onclick="if(PrimeFaces.ajax.Queue.isActive()) return false; $('.jqRealNextStepButton').click();" 
    style="border: 2px solid #008091; padding: 0.5em;"
    styleClass="ju-button" 
    disabled="#{clientContext.client.visitor or checkoutDeliveryDateController.disableNextButton() or totalMinAmountNotMet or facesContext.validationFailed or not facesContext.postback}"
    title="#{clientContext.client.visitor ? messages.disabledForVisitor : tooltip}">
        <f:ajax execute="@this" />
</h:commandButton>

这个方案不需要额外加其他代码，就能直接拦住AJAX验证未完成时的提交操作。

方式2：优化交互体验（可选补充） #

如果希望用户在AJAX运行期间根本无法点击按钮，避免无意义的点击操作，可以在页面加入几行全局JS：

// AJAX请求开始时禁用下一步按钮
$(document).on('pfAjaxStart', function() {
    document.querySelector('[id$="nextStepBtn"]').disabled = true;
});
// AJAX请求结束（含失败场景）后，按钮状态会被你的原有AJAX update逻辑自动刷新为正确的禁用/可用状态，无需额外处理

额外优化建议 #

你当前输入框的验证仅在change事件（即失焦时）触发，若希望用户输入过程中就提前完成验证，可给<p:ajax>新增输入事件触发，加延迟避免频繁请求：

<p:ajax event="keyup" delay="300" process="@this" listener="#{cartController.saveLine(line)}" update="@form cartForm lineFreeText lineEditedSymbols lineFreeTextMessage @([id$=nextStepBtn])" />

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