我如何使用ajax和php重定向?

时间:2017-05-27 11:14:48

标签: javascript php jquery ajax

我正在尝试将用户从登录页面重定向到配置文件。我使用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>

1 个答案:

答案 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;
    }
});