Bootstrap校验结合Ajax函数异常：Ajax调用被忽略求助

你的Ajax被忽略的核心原因有两个：

1. 未阻止表单默认提交行为 #

当Bootstrap校验通过后，你没有阻止表单的默认提交动作，浏览器会直接跳转到form的action地址执行PHP，Ajax代码还没来得及执行就被页面刷新打断了。

2. 原生DOM对象误用jQuery方法 #

form是通过document.querySelectorAll获取的原生DOM元素，不能直接调用jQuery的.attr()、.serialize()、.find()等方法，这会导致代码报错（可能你没开控制台查看），进而中断Ajax执行。

修复后的完整代码 #

JavaScript部分 #

// Bootstrap forms validation
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms).forEach(function (form) {
    form.addEventListener('submit', function (event) {
        // 先阻止所有默认提交行为
        event.preventDefault()
        event.stopPropagation()

        var $form = $(form); // 转成jQuery对象

        if (!form.checkValidity()) {
            form.querySelector(".form-control:invalid").focus();
        } else {
            $.ajax({
                type: "POST",
                url: $form.attr('action'), // 使用jQuery对象调用方法
                datatype: "json",
                data: $form.serialize(),
                beforeSend: function () {
                    $form.find(":submit").html("Sending...").prop('disabled', true);
                },
                error: function (xhr, status, error) {
                    $(".toast").addClass('bg-danger');
                    $(".toast-body").text(xhr.status + ': ' + xhr.statusText);
                    $(".toast").toast("show");
                    // 错误时也恢复按钮状态
                    $form.find(":submit").html("Send <i class='fa-solid fa-paper-plane'></i>").prop('disabled', false);
                },
                success: function (data) {
                    if (data.success === true) {
                        $form.removeClass('was-validated').trigger("reset");
                        $(".toast").addClass('bg-success');
                    } else {
                        $(".toast").addClass('bg-danger');
                    }
                    $(".toast-body").text(data.message);
                    $(".toast").toast("show");
                    // 恢复按钮状态
                    $form.find(":submit").html("Send <i class='fa-solid fa-paper-plane'></i>").prop('disabled', false);
                }
            });
        }
        form.classList.add('was-validated')
    }, false)
});

HTML部分（确保脚本顺序正确：jQuery先于Bootstrap） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<form id="contact-form" method="post" action="/inc/contact.php" autocomplete="off" class="contact card-body needs-validation" novalidate>
    <div class="row">
        <div class="col-xl-6">
            <div class="form-group">
                <input type="text" class="form-control" name="firstname" id="firstname" placeholder="firstname" required>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="form-group">
                <input type="text" class="form-control" name="lastname" id="lastname" placeholder="Lastname" required>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="form-group">
                <input type="email" class="form-control" name="email" id="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="form-group">
                <input type="tel" class="form-control" name="phone" id="phone" placeholder="Phone">
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <textarea name="message" class="form-control" id="message" cols="30" rows="4" placeholder="Create a message here" required></textarea>
            </div>
        </div>
        <div class="col-md-12">
            <div class="row align-items-center">
                <div class="col-auto">
                    <div class="form-group">
                        <button type="submit" class="btn btn-light">Send <i class="fa-solid fa-paper-plane"></i></button>
                    </div>
                </div>
                <div class="col">
                    <p class="small mb-0 mt-0">By clicking this button, you agree to the <a href="" rel="nofollow">terms and conditions</a>.</p>
                </div>
            </div>
        </div>
    </div>
</form>

关键修改说明 #

• 在submit事件开头就调用event.preventDefault()和event.stopPropagation()，彻底阻止表单默认跳转。
• 将原生DOM元素form转为jQuery对象$form，统一使用jQuery方法操作表单。
• 在Ajax的成功、错误回调里都恢复按钮的文本和可用状态，避免按钮一直处于禁用状态。

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