使用AJAX校验PHP接口后，如何正确控制表单提交与阻止？

你的问题核心在于AJAX是异步操作——你写的done回调函数会在表单提交事件的处理逻辑完成之后才执行，所以不管你在回调里返回true还是false，都没法影响已经走完的表单提交流程。我们先拆解下两种写法的问题：

第一种写法的问题 #

你一开始就调用了event.preventDefault()，直接阻止了表单的默认提交行为。之后即使result == 1且本地函数校验通过，回调里的return true也没法让表单继续提交——因为默认行为已经被提前阻止了，而且这个return只是回调函数的返回值，和表单提交事件的返回值没有关联。

第二种写法的问题 #

你没有提前阻止默认行为，AJAX请求发出去后，表单提交事件的处理函数直接执行完毕，浏览器会立刻触发表单提交。等done回调执行的时候，表单已经提交完了，这时候再调用event.preventDefault()完全没用。

正确的解决方案 #

我们需要先阻止默认提交行为，然后在异步校验通过后手动触发表单提交（注意要先解绑校验事件，避免循环触发）。具体代码如下：

$('body').on("submit","#idForm",function(event) {
    // 先阻止默认提交行为，避免异步请求完成前表单提交
    event.preventDefault();
    const $form = $(this); // 缓存当前表单对象，避免重复DOM查询

    $.post('php_file_rute.php', {action:'functionName'})
    .done(function(result) {
        if (result == 1) {
            // 先执行本地页面的校验函数
            if(functionNameInSameJSPage()){
                // 解绑当前的submit事件，防止手动提交时再次触发校验逻辑
                $form.off('submit').submit();
            } else {
                alert('本地校验未通过，请检查输入');
            }
        } else {
            alert('error');
        }
    })
    .fail(function() {
        // 处理AJAX请求失败的场景，提升用户体验
        alert('请求出错，请稍后重试');
    });
});

关键说明： #

1. 提前阻止默认行为：确保表单不会在异步请求完成前提交，把提交的控制权完全交给后续的校验逻辑。
2. 缓存表单对象：方便后续解绑事件和手动提交，同时减少重复的DOM查询操作。
3. 解绑后再手动提交：如果不解绑submit事件，调用$form.submit()会再次触发我们的校验函数，导致无限循环。
4. 覆盖请求失败场景：增加fail回调，处理网络错误或服务端响应异常的情况，给用户明确的提示。

这样就能完美实现你的需求：异步校验不通过时阻止提交并弹出提示，所有条件满足时正常提交表单。

内容的提问来源于stack exchange，提问作者F. Reyes