Bootstrap表单验证通过后AJAX POST请求不执行无报错问题排查

问题修复方案 #

核心问题原因 #

• 表单验证通过后未阻止默认提交行为：表单默认同步提交会直接刷新页面，AJAX请求还未发出就被中断，因此没有请求日志也无报错
• 代码中直接使用未定义的url变量：没有赋值后端API接口地址，会抛出变量未定义错误，且该错误没有被正常捕获
• try/catch只能捕获同步代码异常：AJAX是异步执行逻辑，请求错误无法被外层try/catch捕获，必须通过AJAX自带的回调处理

修复后代码 #

替换原有JS逻辑即可：

(function () {
    'use strict';
    // 请修改为你实际的后端API提交地址
    const SUBMIT_URL = '你的接口地址';
    window.addEventListener('load', function () {
        var forms = document.getElementsByClassName('needs-validation');
        var validation = Array.prototype.filter.call(forms, function (form) {
            form.addEventListener('submit', function (event) {
                // 无论验证是否通过，都先阻止表单默认提交行为，避免页面刷新
                event.preventDefault();
                event.stopPropagation();
                if (form.checkValidity() === false) {
                    form.classList.add('was-validated');
                    return;
                }
                // 验证通过执行提交逻辑
                var data = {
                    firstname: form.name.value,
                    lastname: form.lastname.value,
                    company: form.company.value,
                    email: form.email.value,
                    phone: form.phone.value,
                    jobtitle: form.job.value,
                    message: form.comments.value,
                };
                $.ajax({
                    type: "POST",
                    url: SUBMIT_URL,
                    data: data,
                    success: function(res) {
                        // 提交成功后的逻辑，比如提示提交成功、清空表单
                        console.log('提交成功', res);
                        form.reset();
                        form.classList.remove('was-validated');
                    },
                    error: function(err) {
                        // 提交失败后的逻辑，比如报错提示
                        console.log('提交失败', err);
                    }
                });
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();

额外调试建议 #

如果修改后还有问题，可以打开浏览器控制台的「网络」标签，查看请求的发送状态、返回值，排查接口是否存在跨域、参数错误等问题。

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