javascript - 重定向前的注册/登录确认
问题描述
我有一个正在运行的注册和登录表单,它可以更新/查询链接到我的网站的数据库。目前,我在服务器端执行注册/登录过程之前使用 JavaScript 进行客户端验证(也有验证,但只是为了确保从表单发布的字段不为空)。完成这些过程后,用户将被重定向到主页/重定向页面。但是,为了更好的人机交互,我希望网页在服务器端处理注册/登录过程时显示一个加载图标,然后如果详细信息正确,则在将用户重定向到之前向用户显示确认消息主页/重定向页面。有什么办法可以做到这一点?任何建议/帮助将不胜感激。
报名表格
<form method="POST" action="userRegistration.php" id="registrationForm" novalidate>
<div class="form-row">
<div class="col-md-6 pt-4">
<div class="form-group">
<input type="text" class="form-control" id="firstname" name="firstname" required />
<label class="form-ph" for="firstname" id="firstnamePlaceholder">FIRST NAME</label>
</div>
</div>
<div class="col-md-6 pt-4">
<div class="form-group">
<input type="text" class="form-control" id="surname" name="surname" required />
<label class="form-ph" for="surname" id="surnamePlaceholder">LAST NAME</label>
</div>
</div>
</div>
<div class="form-row">
<div class="col pt-4">
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" autocomplete="off" required />
<label class="form-ph" for="email" id="emailPlaceholder">EMAIL ADDRESS</label>
<small>
<span id="emailCheck"></span>
</small>
</div>
</div>
</div>
<div class="form-row">
<div class="col pt-4">
<div class="form-group">
<input type="text" class="form-control" id="usernameSignup" name="usernameSignup" autocomplete="off" minlength="6" maxlength="32" required />
<label class="form-ph" for="usernameSignup" id="usernameSignupPlaceholder">USERNAME</label>
<small id="helpBlock" class="form-text text-muted">
Must be between 6-32 characters
<span id="usernameCheck"></span>
</small>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 pt-4">
<div class="form-group">
<input type="password" class="form-control" id="passwordSignup" name="passwordSignup" minlength="8" required />
<label class="form-ph" for="passwordSignup" id="passwordSignupPlaceholder">PASSWORD</label>
<small id="helpBlock" class="form-text text-muted">
Must be 8 or more characters
</small>
</div>
</div>
<div class="col-md-6 pt-4">
<div class="form-group">
<input type="password" class="form-control" id="passwordConfirm" name="passwordConfirm" required />
<label class="form-ph" for="passwordConfirm" id="passwordConfirmPlaceholder">CONFIRM PASSWORD</label>
<small>
<span id="passwordCheck"></span>
</small>
</div>
</div>
</div>
<p>
By creating an account, you agree to our Terms and Conditions &
Privacy Policy.
</p>
<button type="submit" class="btn btn-primary btn-block" id="registrationButton">
SIGN UP
</button>
</form>
注册服务器端进程
<?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();
}
}
JavaScript 验证
$("#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();
}
}
解决方案
由于您使用的是 jQuery,因此您可以使用以下函数在执行表单提交的 AJAX 调用期间运行动画:
$(document).ajaxStart(function(){
// code to display animation
});
$(document).ajaxStop(function(){
// code to remove animation when AJAX is complete
});
您的重定向应该在 AJAX 返回中,而不是 PHP 代码中。
推荐阅读
- android - WorkManager 在应用关闭后停止调度周期性 Worker
- typescript - 无法使用示例“with-firebase-hosting-and-typescript”在 next.js 中呈现图像
- javascript - 从 Django 模板向 JavaScript 函数传递参数时出现语法错误
- python - 无法创建线程,因为只有当我给它一个长于 1 的字符串时,“需要 1 个位置参数但给定 4 个”
- python - 通过在数据框 python pandas 的转置上从另一列切片字符串的新列
- algorithm - 使用 CP 优化器进行电池调度
- java - 如何将文件从特定行读取到另一特定行?
- django - 如何在 Django 中自动创建或更新超级用户?
- ios - iOS模拟器的PJSIP库编译错误
- python - Qt QScrollBar 改变背景颜色