如何在PIN验证逻辑中正确使用jQuery的event.preventDefault()阻止表单提交？

嘿，别担心，新手刚接触AJAX和表单提交的时候，很容易踩异步这个坑😉 咱们先理清楚你代码里的问题，再给出可行的方案：

问题根源 #

AJAX默认是异步执行的——也就是说，你的verifyOTP函数会在发送AJAX请求后立刻结束，不会等后端返回结果。这就导致你没法根据验证结果来决定是否阻止表单提交，而且后来把表单submit事件绑定放在AJAX的success回调里时，表单可能已经完成提交了，重复绑定还会引发其他问题。

正确的实现思路 #

我们应该直接监听表单的submit事件，在事件触发的第一时间就阻止默认提交行为，然后完成AJAX验证，最后根据验证结果决定是否手动提交表单。

修改后的代码示例 #

// 直接给表单绑定submit事件
$('form').on('submit', function(event) {
    // 第一步：先阻止默认的表单提交行为
    event.preventDefault();
    
    // 清空之前的提示信息
    $(".error").html("").hide();
    $(".success").html("").hide();
    
    // 获取用户输入的OTP和PIN
    var otp = $("#contomovimentato").val();
    var PIN = $("#PINvalue").val();
    
    // 前端先做简单校验：如果OTP为空，直接提示错误，不发AJAX
    if (!otp) {
        $(".error").html('XPIN non valido.').show();
        return;
    }
    
    var input = { 
        "otp" : otp, 
        "PIN" : PIN, 
        "action" : "verify_otp" 
    };
    
    // 发送AJAX验证请求
    $.ajax({
        url : 'm_ajaxpinr.php',
        type : 'GET',
        dataType : "json",
        data : input,
        success : function(response) {
            // 显示后端返回的提示信息
            $("." + response.type).html(response.message).show();
            
            // 如果验证通过，手动提交表单
            if (response.type === 'success') {
                // 注意：这里用原生DOM的submit方法，避免触发jQuery的submit事件导致循环
                $('form')[0].submit();
            }
        },
        error : function() {
            $(".error").html('验证请求失败，请稍后重试').show();
        }
    });
});

关键细节说明 #

• 先阻止默认提交：在事件回调开头就调用event.preventDefault()，确保表单不会直接提交到后端，而是等待我们的AJAX验证结果。
• 前端预校验：先检查OTP是否为空，减少不必要的后端请求，提升用户体验。
• 手动提交表单：当验证通过时，使用原生DOM元素的submit()方法（也就是$('form')[0].submit()），这样不会再次触发我们绑定的jQuery submit事件，避免无限循环。
• 确保后端返回格式正确：要保证m_ajaxpinr.php返回的是标准JSON格式，且Content-Type设置为application/json，这样jQuery才能正确解析response对象。

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