How to display error message and redirect in jQuery

Question

I’m trying to display the incorrect data message via Ajax but I’m not getting it, what am I doing wrong? And the header is not redirecting

Ajax

$(".form_log").submit(function(){   
    $.ajax({
        url: 'login.php',
        type: 'POST',
        data: $(".form_log").serialize(),
        success: function(data){
            $(".resp").html(data);
        },
        error: function(request, status, error){
            $(".resp").html(error);
        }
    });
    return false;
})

PHP

session_start();
include_once("pdo/config.php");
$conn = conexao();
if(empty($_POST['user'])){
    echo '<span class="msg error">preencha seu login</span>';
}elseif(empty($_POST['pass'])){
    echo '<span class="msg error">preencha sua senha</span>';
}else{

    $user = $_POST['user'];
    $pass = $_POST['pass'];
    $log = $conn->prepare("SELECT * FROM `login` WHERE user = '$user' AND pass = '$pass'");
    $log->execute();
    $count_log = $log->rowCount();
    if($count_log >=1){
        $row_log = $log->fetchAll(PDO::FETCH_OBJ);
        foreach($row_log AS $list_log){
            $_SESSION['nome'] = $list_log->nome;
            $_SESSION['sobrenome'] = $list_log->sobrenome;
            $_SESSION['email'] = $list_log->email;
            $_SESSION['user'] = $list_log->user;
            $_SESSION['captcha'] = $list_log->captcha;
            header("refresh: 3; bem-vindo.php");
            echo '<span class="msg success">aguarde...</span>';
        }
    }else{
        echo '<span class="msg error">dados incorretos</span>';
    }
}

Answer 1

Ajax returns data. O header is a PHP function that will only be processed on the server, that is, it does no effect on Ajax.

You must redirect by Javascript itself when Ajax returns the success message. A suggestion is to check if in the return you have the string "Success" for the class success of the span returned:

if(~data.indexOf("success")){

   setTimeout(function(){

      location.href = "bem-vindo.php";

   }, 3000);

}

The setTimeout with the value 3000 means that the redirect will take place after 3 seconds (3000 milliseconds). Your code would look like this:

JS:

$(".form_log").submit(function(){   
    $.ajax({
        url: 'login.php',
        type: 'POST',
        data: $(".form_log").serialize(),
        success: function(data){
            $(".resp").html(data);

            if(~data.indexOf("success")){

               setTimeout(function(){

                  location.href = "bem-vindo.php";

               }, 3000);

            }
        },
        error: function(request, status, error){
            $(".resp").html(error);
        }
    });
    return false;
});

PHP:

Beyond the header not work with Ajax, it is still in the wrong place, inside a loop foreach. This is probably causing an error in PHP.

Just remove the line header("refresh: 3; bem-vindo.php"); and put the echo '<span class="msg success">aguarde...</span>'; after the foreach:

foreach($row_log AS $list_log){
   $_SESSION['nome'] = $list_log->nome;
   $_SESSION['sobrenome'] = $list_log->sobrenome;
   $_SESSION['email'] = $list_log->email;
   $_SESSION['user'] = $list_log->user;
   $_SESSION['captcha'] = $list_log->captcha;
}
echo '<span class="msg success">aguarde...</span>';