我的注册表单工作正常,因为signup.inc.php文件正在传递和检查数据,但在视觉上它没有显示错误样式,并且在成功验证表单并添加用户之后,它没有将用户重定向到profile.php。任何人都可以帮我理解吗?提前致谢。
的index.php:
<?php
session_start();
include 'dbh.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Yahbang</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#signup-form").submit(function(event) {
event.preventDefault();
var first = $("#signup-first").val();
var last = $("#signup-last").val();
var email = $("#signup-email").val();
var pwd = $("#signup-pwd").val();
var submit = $("#signup-submit").val();
$.ajax({
url: 'include/signup.inc.php',
type: 'POST',
data: {first: first, last: last, email: email, pwd: pwd, submit: submit},
dataType: 'json',
success: function(respond){
if(!respond.status)
{
alert(respond.message);
}
else
Window.Location.href = respond.redirect;
}
});
});
});
</script>
</head>
<body>
<header>
<div class="header_index">
<div class="headerlogo">
<nav>
<ul>
<li><a href="index.php">Yahbang</a></li>
</ul>
</nav>
</div>
<form id="login-form" class="loginform" action='include/login.inc.php' method='POST'>
<input id="login-email" type='text' name='email' placeholder='Email'>
<input id="login-pwd" type='password' name='pwd' placeholder='Password'>
<p><a href="forgotpassword.php">Forgot Password</a></p>
<button id="login-submit" type='submit'>Login</button>
<p class="login-message"></p>
</form>
</header>
<form id="signup-form" class="signup" action='include/signup.inc.php' method='POST'>
<input id="signup-first" type='text' name='first' placeholder='First Name'><br>
<input id="signup-last" type='text' name='last' placeholder='Last Name'><br>
<input id="signup-email" type='text' name='email' placeholder='Email'><br>
<input id="signup-pwd" type='password' name='pwd' placeholder='Password'><br>
<button id="signup-submit" type='submit'>Sign Up</button>
<p class="signup-message"></p>
</form>
<footer>
<div class="footer_index">
<nav>
<ul>
<li><a href="contact.php">Contact Us</a></li>
<li><a href="TermsofUse.php">Terms of Use</a></li>
</ul>
</nav>
</div>
</footer>
</body>
</html>
signup.inc.php:
<?php
session_start();
include '../dbh.php';
$respond = array(
'status' => true,
'message' => 'There was an error',
'redirect' => '../profile.php'
);
if (isset($_POST['submit'])) {
$first = $_POST['first'];
$last = $_POST['last'];
$email = $_POST['email'];
$pwd = $_POST['pwd'];
$errorEmpty = false;
$errorEmail = false;
if (empty($first) || empty($last) || empty($email) || empty($pwd)) {
echo "<span class='signup-error'>Please fill out all fields!</span>";
$errorEmpty = true;
}
elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "<span class='signup-error'>Please enter a valid email address!</span>";
$errorEmail = true;
}
else {
$sql = "SELECT email FROM user WHERE email='$email'";
$result = mysqli_query($conn, $sql);
$emailcheck = mysqli_num_rows($result);
if ($emailcheck > 0) {
echo "<span class='signup-error'>That email address already exists!</span>";
$errorEmail = true;
echo json_encode($respond);
}
else {
$encryptpwd = password_hash($pwd, PASSWORD_DEFAULT);
$sql = "INSERT INTO user (first, last, email, pwd)
VALUES ('$first', '$last', '$email', '$encryptpwd')";
$result = mysqli_query($conn, $sql);
}
}
}
?>
<script>
$("#signup-first, #signup-last, #signup-email, #signup-pwd").removeClass("input-error");
var errorEmpty = "<?php echo $errorEmpty; ?>";
var errorEmail = "<?php echo $errorEmail; ?>";
if (errorEmpty == true) {
$("#signup-first, #signup-last, #signup-email, #signup-pwd").addClass("input-error");
}
if (errorEmail == true) {
$("#signup-email").addClass("input-error");
}
if (errorEmpty == false && errorEmail == false) {
$("#signup-first, #signup-last, #signup-email, #signup-pwd").val("");
}
</script>
答案 0 :(得分:0)
因此,您只能将完整的脚本转储回ajax请求并期望它能够正常工作。该请求由ajax函数处理,而不仅仅粘贴在当前页面的底部。
在您的情况下,您的脚本可以移动到主index.php
并由ajax回调函数调用。例如:
if(!respond.status)
{
alert(respond.message);
showErrors(respond.errorEmpty, respond.errorEmail);
}
以上假设了几件事。首先,您可以将当前脚本略微更改为可调用函数,即:
function showErrors(errorEmpty, errorEmail) {
$("#signup-first, #signup-last, #signup-email, #signup-pwd").removeClass("input-error");
if (errorEmpty == true) {
$("#signup-first, #signup-last, #signup-email, #signup-pwd").addClass("input-error");
}
if (errorEmail == true) {
$("#signup-email").addClass("input-error");
}
if (errorEmpty == false && errorEmail == false) {
$("#signup-first, #signup-last, #signup-email, #signup-pwd").val("");
}
}
现在这个showErrors
函数可以放在你的主index.php脚本中,这样ajax函数就可以根据需要调用它。
其次,它假设您将php中的$errorEmpty
和$errorEmail
变量传递回响应中的ajax请求,类似于其他响应变量。类似的东西:
$respond = array(
'status' => true,
'message' => 'There was an error',
'redirect' => '../profile.php',
'errors',
);
if (empty($first) || empty($last) || empty($email) || empty($pwd)) {
$respond['errors'][] = "Please fill out all fields!";
$respond['errorEmpty'] = true;
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$respond['errors'][] = "Please enter a valid email address!";
$respond['errorEmail'] = true;
} else {
$sql = "SELECT email FROM user WHERE email='$email'";
$result = mysqli_query($conn, $sql);
$emailcheck = mysqli_num_rows($result);
if ($emailcheck > 0) {
$respond['errors'][] = "That email address already exists!";
$respond['errorEmail'] = true;
echo json_encode($respond);
}
现在您可以将respond.errorEmpty
传递给错误处理函数。