javascript - 使用 bootstrap 4 模板提交表单时，Ajax 在 IE 和 Edge 中有效，但在 Firefox 中无效

Question

我正在尝试验证表单输入字段并在提交表单之前使用引导程序 4 模板（称为 Deskapp）在登录页面中运行 Ajax 代码。只有两个输入字段用户名和密码。

大部分代码已由模板提供，我只是根据需要调整了代码。该代码在 IE 和 Edge 中运行良好，但 Ajax 代码在 Firefox 中无法运行。

 // html code
<div class="login-wrap customscroll d-flex align-items-center flex-wrap justify-content-center pd-20">
    <div class="login-box bg-white box-shadow pd-30 border-radius-5">
        <img src="vendors/images/login-img.png" alt="login" class="login-img">
        <h2 class="text-center mb-30">Login</h2>
        <form class="needs-validation" novalidate>
            <div class="input-group custom input-group-lg">
                <input class="form-control" name="userid" type="number" placeholder="userid" required="required">
                <div class="input-group-append custom input-tip-div" class="input-tip-div">
                    <span class="input-group-text"><i class="fa fa-user" aria-hidden="true"></i></span>
                </div>
                <div class="invalid-feedback"> <?php echo REQUIRED.NUMBERS;?>
                </div>
            </div>
            <div class="input-group custom input-group-lg">
                <input type="password" class="form-control" placeholder="**********">
                <div class="input-group-append custom">
                    <span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="input-group">
                        <input id="send" class="btn btn-outline-primary btn-lg btn-block" type="submit" value="Sign In">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

 // script code

(function() {
    'use strict';
    window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() == false) {
                    event.preventDefault();
                    event.stopPropagation();
                } 
                form.classList.add('was-validated');
                $.ajax({
                    type:"POST",
                    url:"user/logindo.php",
                    data: $("#send").closest("form").serialize(),       
                    success:function (data) {
                        alert ("This is the Data from Json: "+data);
                    }
                });

            }, false);
        });
    }, false);
})();

我希望首先验证表单输入字段，然后执行 Ajax 代码，最后提交表单。

在 Firefox 中的实际结果，两个输入字段验证正确，然后 Firefox 忽略 Ajax 代码并提交表单，但 IE 和 Edge 浏览器通过按预期执行所有代码顺利运行。先感谢您

标签： javascriptphpajaxbootstrap-4