我正在尝试将用户从登录页面重定向到配置文件。我使用ajax来验证表单,但是当我成功登录时,它会在索引页面顶部显示配置文件页面。如何在新页面中重定向到个人资料页面?
索引。 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.0/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();
$(".signup-message").load("include/signup.inc.php", {
first: first,
last: last,
email: email,
pwd: pwd,
submit: submit
});
});
});
$(document).ready(function() {
$("#login-form").submit(function(event) {
event.preventDefault();
var email = $("#login-email").val();
var pwd = $("#login-pwd").val();
var submit = $("#login-submit").val();
$(".login-message").load("include/login.inc.php", {
email: email,
pwd: pwd,
submit: submit
});
});
});
</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>
的login.php:
<?php
session_start();
include '../dbh.php';
if (isset($_POST['submit'])) {
$email = $_POST['email'];
$pwd = $_POST['pwd'];
$sql = "SELECT * FROM user WHERE email='$email'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$hash_pwd = $row['pwd'];
$hash = password_verify($pwd, $hash_pwd);
$errorEmpty = false;
$errorEmail = false;
if ($hash == 0) {
echo "<span class='login-error'>Your Email or password is incorrect!</span>";
$errorEmpty = true;
} else {
$sql = "SELECT * FROM user WHERE email='$email' AND pwd='$hash_pwd'";
$result = $conn->query($sql);
if (!$row = $result->fetch_assoc()) {
echo "<span class='login-error'>Your Email or password is incorrect!</span>";
$errorEmpty = true;
}
else {
$_SESSION['id'] = $row['id'];
header("Location: ../profile.php");
}
}
}
?>
<script>
$("#login-email, #login-pwd").removeClass("input-error");
var errorEmpty = "<?php echo $errorEmpty; ?>";
var errorEmail = "<?php echo $errorEmail; ?>";
if (errorEmpty == true) {
$("#login-email, #login-pwd").addClass("input-error");
}
if (errorEmail == true) {
$("#login-email").addClass("input-error");
}
if (errorEmpty == false && errorEmail == false) {
$("#login-email, #login-pwd").val("");
}
</script>
答案 0 :(得分:1)
你应该考虑多个音符才能做到这一点。
收集数组中的所有响应
您应该创建一个数组并将要响应的数据放在那里。例如:
$respond = array(
'status' => false,
'message' => 'Message Seen By User',
'redirect' => 'Destination URL'
);
每当您处理请求时,您都应该更改这些索引。例如,如果身份验证成功,则将status
更改为true
,将redirect
更改为destination url
等等。最后,当您处理所有内容时,请不要使用任何header
或{{ 1}},最后将数组转换为json并回显它:
echo
重构你的JS
而不是使用多个$(document).ready为您想要的每个事件使用它。例如:
echo json_encode($response);
使用JQuery AJAX
而不是加载使用ajax:
$(document).on('submit', '.login-message', function(){
//Write Event Handling Here
});
或使用JQuery加载
对这些请求使用负载是不够的,但是:
$.ajax({
url: 'url/to/php',
type: 'POST',
data: {email: email, pwd: pwd, submit: submit},
dataType: 'json',
success: function(respond){
if(!respond.status)
{
//Show respond.message to user
}
else
Window.Location.href = respond.redirect;
}
});