即使使用 preventDefault，表单仍会提交答案

【问题标题】：Form still submits even with preventDefault即使使用 preventDefault，表单仍会提交
【发布时间】：2014-09-24 01:40:11
【问题描述】：

我不知道这里出了什么问题。 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; }

【问题讨论】：

你只在内部函数返回false，而外部函数什么也不返回，所以提交会被触发。
@Tyr 我尝试添加“return false;”到另一个函数并在内部函数中添加了一个else子句以返回true，但是现在它不会在用户存在时提交表单。
您当前的代码对SQL injection开放。使用 CRYPT_BLOWFISH 或 PHP 5.5 的 password_hash() 函数。对于 PHP password_hash() compatibility pack。另外，use prepared statements 或 PDO with prepared statements。

标签： javascript php jquery ajax forms

【解决方案1】：

因为您将 prevent default 放在异步的 ajax 成功函数中。所以这就是它仍在提交的原因。您必须在调用 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;
}
});

【讨论】：

当 ajax 结果设置为 true 时，如何继续提交表单？我尝试解除绑定然后提交，但它没有提交。
当我导致无限循环时感到困惑，我注意到我将 var isFormChecked 放在函数中。感谢你的回答。 :)

【解决方案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(); }
        }
    });
});

【讨论】：