使用AJAX登录PHP

Question

I want to be able to login using AJAX to call the PHP file. My ajax and php code looks fine and brings no errors when do i do console.log(data). The problem is that the php redirect("my-account.php") won't execute when the form posts if the email and password is true. I haven't got round to the validation part yet just when the fields are left empty. The escape_string is a function that I created in the functions.php file to prevent sql injections if you's are wondering.

account.php code

<?php require_once("includes/db.php"); ?>

<?php include "includes/header.php"; ?>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <script>

           $(document).ready(function(){

               $('#btnLogin').click(function(){

                   var email =  $("#email").val();
                   var password =  $("#password").val();


             var dataString = 'email='+email+ '&password='+password;

                    if(email=='' || password=='')
                    {
                    alert("Please fill all fields");
                    }
                    else
                    {
                    $.ajax({
                    type: "POST",
                    url: "login_process.php",
                    data: dataString,
                    success: function(data){

                       console.log(data);

                    }
                    });
                    }

                   return false;

               });


           });
           </script>

 <div class="container-fluid" style="margin-top:80px;">

 <div class="row">

  <div class="col-xs-4 col-xs-offset-1">

   <div class="well" style="height:360px;">

   <h3>Login</h3>

   <br />
<form name="login" method="post" id="login">

    <div class="form-group">

    <label for="Email">Email:</label>
    <input type="email" class="form-control" id="email" name="email" required autofocus>


    </div>

    <div class="form-group">


    <label for="Password">Password:</label>
    <input type="password" class="form-control" id="password" name="password" required>

    </div>


    <div class="form-group">

    <input type="submit" class="btn btn-primary btn-md pull-left" id="btnLogin" name="btnlogin" value="Login">

    </div>

     <div class="form-group">

    <a class="pull-right" href="#">Forgot your password? </a>

    </div>


</form>

</div>

</div>

login_process.php

  <?php require_once("includes/db.php"); ?>

   <?php

    $email = escape_string($_POST['email']);
    $password = escape_string($_POST['password']);

    $login_query = query("SELECT * from users where email = '{$email}'");

    while($row = fetch_array($login_query)) {

        $db_pass = $row['password'];
        $first_name = $row['first_name'];
        $last_name = $row['last_name'];
        $contact_num = $row['tel'];
        $email = $row['email'];
        $postcode = $row['postcode'];
        $title = $row['title'];
        $user_id = $row['user_id'];
        $role = $row['role'];

        $_SESSION['user_id'] = $user_id;
        $_SESSION['title'] = $title;
        $_SESSION['firstname'] = $first_name;
        $_SESSION['lastname'] = $last_name;
        $_SESSION['mob'] = $contact_num;
        $_SESSION['email'] = $email;
        $_SESSION['postcode'] = $postcode;



    if(password_verify($password, $db_pass)) {

        redirect("my-account.php");

        }  


    }

  ?>

Answer 1

You can't redirect from an ajax request. For this set up to work your ajax request would have to return a value that would tell the front-end to redirect. In your AJAX success callback, you'd then check that value and then

window.location = "my-account.php";

But this isn't a secure way of protecting my-account.php. If you want to redirect on login anyway why are you using AJAX at all? Why not just use a form that posts to my-account.php, and is validated there?