为什么Ajax代码提交表单功能正常但未执行success回调函数？

• 核心原因1：表单默认提交跳转行为未被拦截，AJAX请求发出后页面立刻刷新跳转，JS执行上下文被销毁，无法触发后续的success回调
• 核心原因2：使用FormData作为请求参数时，未配置jQuery AJAX的必要参数，导致请求格式解析异常，即使后端正常处理，前端也会判定为请求失败进入error回调，而非success回调
• 额外注意：注释代码中存在形参名不匹配的问题，启用注释代码前需要修正避免运行报错

修复步骤 #

1. 拦截表单默认提交行为，在submitHandler函数末尾添加return false阻止页面跳转
2. 给AJAX配置processData: false和contentType: false两个必填参数，适配FormData格式的请求体
3. 修正注释代码中的变量名错误，补充error回调方便排查异常

修复后的完整代码 #

submitHandler: function(form) {
            $.ajax({
                type:form.method,
                url: form.action,
                data: new FormData(form),
                processData: false, // 禁止jQuery自动序列化FormData参数
                contentType: false, // 禁止jQuery手动设置Content-Type，由浏览器自动生成带边界的正确格式
                success: function(data){
                    toastr.success("Success");
                    // 以下为取消注释后的修正代码
                    /*console.log('Done');
                    let obj = JSON.parse(data); // 原代码误用了未定义的res变量，改为和形参一致的data
                    //console.log(data); 
                    //return false;                         
                    if (obj.status == 'success') {
                        toastr.success("Success");
                        //window.location.replace("{{URL('admin/calling-cards/edit')}}/"+obj.id);   
                    } else if (obj.status == 'error') {
                        toastr.error(obj.msg);
                    }*/
                },
                // 补充错误回调用于排查问题
                error: function(xhr, errInfo) {
                    console.log('请求异常信息：', errInfo);
                    toastr.error('请求异常，请检查控制台日志');
                }
            })
            return false; // 阻止表单默认提交跳转
        }

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