验证正确后如何发送ajax调用？

Question

我正在尝试将数据发送到我的 heroku 数据库，我有来自 html 文件的用户输入并将其发送到我的 jquery 文件，我的验证工作但我希望在此有效后发送我的 ajax 调用，即单击提交按钮。它似乎没有到达我的 ajax 调用（ajax 有效）。成功位是我尝试显示成功消息（swal 是 sweetalert 库，并且不确定成功是否有效）。我相信我的提交处理程序有问题。

// * html 格式的代码 *

                <form action="" name="registration"><br>

                    <label for="email">Email</label><br>
                    <input type="email" name="email" id="email" placeholder="example@example.com" /><br><br>

                    <label for="password">Password</label><br>
                    <input type="password" name="password" id="password"
                        placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;" /><br><br>

                    <label for="repassword">Re-Type Password</label><br>
                    <input type="password" name="repassword" id="repassword"
                        placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;" /><br><br>

                    <input type="checkbox" name="agreeBox" id="agreeBox" />
                    <label for="agree-boxId">I agree
                        to all statements in <a href="../documents/terms_of_service" class="term-service">Terms of
                            Service</a></label><br><br>

                    <button type="submit" id="signUp">Register</button>

                    <div class="signup-image">
                        <figure><img src="images/signup-image.png" alt="sign up image"></figure>
                    </div>

                </form>

// ***** 我在 Jquery 文件中的内容 ******

$("form[name='registration']").validate({

    //  *** Validation Rules  ***

    rules: {
        email: {
            required: true,
            email: true
        },
        password: {
            required: true,
            minlength: 8,
            maxlength: 60
        },
        repassword: {
            required: true,
            minlength: 8,
            maxlength: 60,
            equalTo: '#password'
        },
        agreeBox: {
            required: true
        }
    },

    //  ***  Validation error messages  ***

    messages: {

        email: "Please enter a valid email address",

        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 8 characters long",
            maxlength: "Your password can't be more than 60 characters"
        },

        repassword: {
            required: "Please provide your password",
            minlength: "Your password must be at least 8 characters long",
            maxlength: "Your password can't be more than 60 characters",
            equalTo: "Your password must equal your first password"
        },
        agreeBox: {
            required: "Please read conditions and tick box"
        }
    },

    submitHandler: function () {
        ev.preventDefault();

        var userEmail = $('input[id="emailId"]').val();
        var userPass = $('input[id="passId"]').val();

        $.ajax({
            method: 'POST',
            url: 'my database (this has been replaced)',
            data: JSON.stringify({
                name: userEmail,
                password: userPass,
                status: 'user',
            }),
            contentType: "Application/json",
            dataType: "json",
            success: function () {
                swal("Lets Go Shopping!", {
                    buttons: {
                        confirm: "Go Shopping",
                    },
                })
                    .then(() => {
                        window.location = 'index.html';
                    });
            }
        })
        return false;
    }

});

Answer 1

您遇到的问题是 AJAX 调用语法或用法。您已经使用了成功，然后同时调用了。你需要要么成功要么然后。

如果你需要成功那么它应该在里面然后像这样。

$.ajax({
     method: 'POST',
     url: 'my database (this has been replaced)',  
     success: function( resp ) {
         console.log('the success function', resp );
     },
     error: function( req, status, err ) {
         console.log( 'Oops, something went wrong!!!', status, err );
     }
});

或者你可以像这样使用 .then()

 $.ajax({   
     method: 'POST',
     url: 'my database (this has been replaced)'
 }).then( function( resp ) {
            console.log('the success function', resp );
         }, 
         function( req, status, err ) {
            console.log( 'Oops, something went wrong!!!', status, err ); 
});

就像$.ajax({}).then(success, err)

查看此post 以进一步阅读。