Javascript 重定向前的注册/登录确认

我有一个正在运行的注册和登录表单，可以更新/查询链接到我网站的数据库。目前，在服务器端执行注册/登录过程之前，我正在使用JavaScript进行客户端验证。服务器端也有验证，但只是为了确保表单中发布的字段不为空。完成这些过程后，用户将被重定向到主页/重定向页面。但是，为了更好地进行人机交互，我希望网页在服务器端处理注册/登录过程时显示一个加载图标，然后在将用户重定向到主页/重定向页面之前向用户显示一条确认消息（如果详细信息正确）。我有什么办法可以做到这一点吗？如有任何建议/帮助，将不胜感激

登记表

登录表单

登录服务器端进程

---

由于您使用的是jQuery，因此可以使用以下函数在AJAX调用期间运行动画，该调用将执行表单提交：

$(document).ajaxStart(function(){
    // code to display animation
});

$(document).ajaxStop(function(){
    // code to remove animation when AJAX is complete
});

---

您的重定向应该在AJAX返回中，而不是PHP代码中。

在散列之前，无需在它们上添加或使用任何其他清理机制。这样做会更改密码并导致不必要的额外编码。谢谢提醒。这是否意味着删除php代码中密码变量的修剪？是的。拆下饰件我不太确定你的建议，所以我想确认一下。我目前没有ajax调用来执行提交，但我认为我应该在表单中去掉action属性，而是在表单提交时使用ajax来运行php代码？另外，在进行ajax调用之前添加动画，并在响应之后停止动画？使用此代码，动画将在触发ajax调用时开始，然后在ajax完成时结束。此时，您可以将重定向放在AJAX成功或完成函数中。是的，我建议您可以使用AJAX来完成表单提交，而不必删除action属性。

<?php
// try catch statement to connect to database through getConnection() function in dbConn.php file
try {
    require_once("dbConn.php");
    $dbConn = getConnection();
} catch (Exception $e) {
    echo "A problem occured: " . $e->getMessage();
}

// Form validation for POST method to check fields are not empty
if (!empty($_POST['firstname'])) {
    $firstname = filter_has_var(INPUT_POST, 'firstname') ? $_POST['firstname'] : null;
    $firstname = trim($firstname);
} else {
    echo "A first name must be entered.<br/>";
}

if (!empty($_POST['surname'])) {
    $surname = filter_has_var(INPUT_POST, 'surname') ? $_POST['surname'] : null;
    $surname = trim($surname);
} else {
    echo "A surname must be entered.<br/>";
}

if (!empty($_POST['email'])) {
    $email = filter_has_var(INPUT_POST, 'email') ? $_POST['email'] : null;
    $email = trim($email);
} else {
    echo "An email address must be entered.<br/>";
}

if (!empty($_POST['usernameSignup'])) {
    $usernameSignup = filter_has_var(INPUT_POST, 'usernameSignup') ? $_POST['usernameSignup'] : null;
    $usernameSignup = trim($usernameSignup);
} else {
    echo "A username must be entered.<br/>";
}

if (!empty($_POST['passwordSignup'])) {
    $passwordSignup = filter_has_var(INPUT_POST, 'passwordSignup') ? $_POST['passwordSignup'] : null;
    $passwordSignup = trim($passwordSignup);
} else {
    echo "A password must be entered.<br/>";
}

if (!empty($_POST['passwordConfirm'])) {
    $passwordConfirm = filter_has_var(INPUT_POST, 'passwordConfirm') ? $_POST['passwordConfirm'] : null;
    $passwordConfirm = trim($passwordConfirm);
} else {
    echo "A password must be entered that matches the previous one.<br/>";
}

// Checks to see if both passwords entered match, to set the passwordHash variable.
if ($passwordSignup == $passwordConfirm) {
    $passwordHash = password_hash($passwordSignup, PASSWORD_DEFAULT);
} else {
    echo "The passwords entered don't match, please try again <br/>";
}

// If all the previous steps are valid and variables are set, try to run the SQL query to make new account.
if (!empty($firstname) && !empty($surname) && !empty($email) && !empty($usernameSignup) && !empty($passwordHash)) {
    try {
        $sqlQuery = "INSERT INTO GH_users (firstname, surname, email, accountConfirmed, username, passwordHash)
        VALUES ('$firstname', '$surname', '$email', 0, '$usernameSignup', '$passwordHash')";

        $dbConn->exec($sqlQuery);
        header("location: index.php");
        exit;
    } catch (PDOException $e) {
        echo $sqlQuery . "<br>" . $e->getMessage();
    }
}

$("#registrationForm").submit(function(event) {
  $("#registrationForm input").each(function() {
    if (!$(this).hasClass("is-valid")) {
      $(this).addClass("is-invalid");
      event.preventDefault();
      event.stopPropagation();
    }
  });
});

<form method="POST" action="userAuthentication.php" id="loginForm" novalidate>
    <div class="form-row">
        <div class="col-12 pt-4">
            <div class="form-group">
                <input type="text" class="form-control" id="username" name="username" required />
                <label class="form-ph" for="username" id="usernamePlaceholder">USERNAME</label>
            </div>
        </div>
    </div>

    <div class="form-row pb-3">
        <div class="col-12 pt-3">
            <div class="form-group">
                <input type="password" class="form-control" id="password" name="password" required />
                <label class="form-ph" for="password" id="passwordPlaceholder">
                    PASSWORD
                </label>
                <small id="helpBlock" class="float-right">
                    <a href="#">Forgotten Password?</a>
                </small>
            </div>
        </div>
    </div>

    <button type="submit" class="btn btn-primary btn-block" id="loginButton">
        SIGN IN
    </button>
</form>

<?php

// try catch statement to connect to the database connection file to use the getConnection() function and store it
// in $dbConn. If it doesn't connect, then show the error message.
try {
    ini_set("session.save_path", "/home/unn_w16010421/sessionData");
    session_start();
    require_once("dbConn.php");
    $dbConn = getConnection();
} catch (Exception $e) {
    // Instead of echoing error, redirect user to error page for a more professional look.
    echo "A problem occured: " . $e->getMessage();
}

// Takes the entered username and password from the post method (Login form) and stores them into a variable for
// later use.
$username = filter_has_var(INPUT_POST, 'username') ? $_POST['username'] : null;
$username = trim($username);
$password = filter_has_var(INPUT_POST, 'password') ? $_POST['password'] : null;

// If the post method has an empty username or password let the user know.
if (empty($username) || empty($password)) {
    // Again in stead of echoing error, redirect user to error page for a more professional look.
    echo "You need to provide a username and a password. Please try again.";
}
// Else, check the database for a match with the inputted username and password.
else {
    // try statement to check if the entered username and password matches with one in the database.
    try {
        // Clears any session data.
        // $_SESSION = array();

        // SQL Query to retrieve the passwordHash for a user from the GH_users table where the username entered by 
        // the user matches one in the database.
        $sqlQuery = "SELECT passwordHash FROM GH_users WHERE username = :username";
        $stmt = $dbConn->prepare($sqlQuery);
        // Executes the query to go through the array until the username entered by the user matches one in the
        // database and stores it into $user variable.
        $stmt->execute(array(':username' => $username));
        $user = $stmt->fetchObject();

        // If the query returns a user with the entered username, then check if the password entered also matches
        // with the one in the database. If it does, authentication is complete and create a session for the user.
        // Redirect user to home page.
        if ($user) {
            if (password_verify($password, $user->passwordHash)) {
                $userID = $user->userID;
                $_SESSION['userID'] = $userID;
                $_SESSION['logged-in'] = true;
                $_SESSION['username'] = $username;

                if (isset($_SESSION['login_redirect'])) {
                    header("Location: " . $_SESSION['login_redirect']);
                    // Cleans up the session variable 
                    unset($_SESSION['login_redirect']);
                    exit;
                } else {
                    header("location: index.php");
                    exit;
                }
            }
            // If the password for an existing username doesn't match with the one in the database, inform the user
            else {
                echo "The username and/or password was incorrect, please try again.";
            }
        }
        // If the query doesn't return a user, inform the user.
        else {
            echo "The username or password was incorrect, please try again.";
        }
    } catch (PDOException $e) {
        echo "Error: " . $e->getMessage();
    }
}

$(document).ajaxStart(function(){
    // code to display animation
});

$(document).ajaxStop(function(){
    // code to remove animation when AJAX is complete
});