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成功函数中放置了prevent default。这就是为什么它还在提交的原因。你必须在调用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;
}
});

Answer 2

您可以做的是在html中将按钮类型从提交更改为按钮。

然后点击你验证，然后在jquery的帮助下你提交你的表格。

以下是它将如何完成您的工作：

<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="button" name="processButton" class="signIn" value="Sign-in" ></td>
        </tr>
    </table>
</form>



$('#processButton').click ( 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');
                return false;
            }
            else { $("#signIn").submit(); }
        }
    });
});

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

2 个答案: