即使使用了preventDefault，表单仍然会提交

Question

我不知道这里出了什么问题。PreventDefault 应该阻止表单提交，但它仍然继续。我有一个 ajax 调用，它验证用户是否有效。如果没有，则阻止提交。否则，继续登录和主页。

形式

<form id="signIn" method="post" action="processForms.php">
    <table cellspacing="10">
        <tr id="errorSignIn" hidden="hidden">
            <td class="centerItem errorMessage" colspan="3">
                Incorrect Username and/or Password
            </td>
        </tr>
        <tr>
            <td><input type="text" id="username" name="username" autocomplete="off" autofocus required placeholder="Username..."></td>
            <td><input type="password" id="password" name="password" autocomplete="off" required placeholder="Password..."></td>
            <td><input type="submit" name="processButton" class="signIn" value="Sign-in" ></td>
        </tr>
    </table>
</form>

JavaScript

$('#signIn').submit ( function (e) {
    var username = $('#username').val();
    var password = $('#password').val();
    var dataString = "username=" + username + "&password=" + password;
    $.ajax( {
       type: "POST",
        url: "ajaxCheck.php",
        data: dataString,
        cache: false,
        success: function (result) {
            if (!result) {
                $('#errorSignIn').removeAttr('hidden');
                e.preventDefault();
                return false;
            }
        }
    });
});

ajaxCheck.php

<?php
$username = $_POST['username'];
$password = $_POST['password'];
$password = md5($password);
$dbConnection = mysqli_connect('localhost','root','','onboard');
$query =  "SELECT * FROM account WHERE username='$username' AND password='$password'";
$result = mysqli_query($dbConnection,$query);
$count = mysqli_num_rows($result);
if ($count == 1) { echo true; }
else { echo false; }

Answer 1

因为您将阻止默认值放入 ajax success 函数中，该函数是异步的。所以这就是为什么它仍然提交。您必须在调用 ajax 之前阻止它，而不是在 ajax 完成之后阻止它。

$('#signIn').submit ( function (e) {
         e.preventDefault(); // put preventDefault here not inside the ajax success function
        var username = $('#username').val();
        var password = $('#password').val();
        var dataString = "username=" + username + "&password=" + password;
        $.ajax( {
           type: "POST",
            url: "ajaxCheck.php",
            data: dataString,
            cache: false,
            success: function (result) {
                if (!result) {
                    $('#errorSignIn').removeAttr('hidden');

                    return false;
                }
            }
        });
    });

您可以在这里回答您的以下问题。

var isFormChecked = false; // this variable will deremine if the ajax have finished what you wanted to do
$('#signIn').submit ( function (e) {

 // if ajax set this to true, it will not go here when it triggers.
 if(!isFormChecked){ 
    e.preventDefault(); // put preventDefault here not inside the ajax success function
    var username = $('#username').val();
    var password = $('#password').val();
    var dataString = "username=" + username + "&password=" + password;
    $.ajax( {
       type: "POST",
        url: "ajaxCheck.php",
        data: dataString,
        cache: false,
        success: function (result) {
           // if result is set to true
           isFormChecked = result;
           // then trigger the submit of the form
           $('#signIn').trigger('submit');

        }
    });
} else {
    // form is submitted
    isFormChecked = true;
}
});