Ns789
Ns789

Reputation: 541

How to redirect after successful php if statement in ajax?

PHP As you can see in the below PHP code I am trying the redirect the user but I am struggling to do it in jquery. what I want is if login statement is a success login_success then the user will redirect on myprofile.php but nothing happened.

    if($query)
          {
             $num=mysqli_fetch_array($query); //fetching all matching records

                if($num > 0) 
                {
                  //if record found
                    $_SESSION["loggedin"] = TRUE;
                    $_SESSION['cid']=$num['cid'];

                    echo  "login_success";

                }
                else
                {
                    echo "invalid email or password.";
                }

           }else
           {
             echo "something went wrong!";
           }

Ajax:

$.ajax({  
                       url:"sql/login_process.php",  
                       method:"POST",  
                       data:$('#login_form').serialize(),  
                       beforeSend:function(){  
                            $('#login_response').html('<span class="text-info"><i class="fas fa-spinner"></i> Loading response...</span>');  
                       },  
                       success:function(data){  
                            $('form').trigger("reset");  
                            $('#login_response').fadeIn().html(data);  
                            setTimeout(function(){  
                                 $('#login_response').fadeOut("slow");  
                            }, 7000);

                            if(data == "login_success") location.href = "http://www.example.com/myprofile.php";
                       }  
                  }); 

I thing I am missing something here.

if(data == "login_success") location.href = "http://www.example.com/myprofile.php";

Upvotes: 0

Views: 175

Answers (2)

Ns789
Ns789

Reputation: 541

Thanks for all the answers and comments above. Honestly, I like Patrick Q Idea here and here is what I accomplished so far.

Ajax

  success:function(data){  
      if(data != null && data == "success"){ //redirect...
               window.location = "http://google.com";
    } else { //report failure...

                   $('form').trigger("reset"); 
                   $('#login_response').fadeIn().html(data);
                   setTimeout(function(){  
                   $('#login_response').fadeOut("slow");  
                   }, 7000);
              }
    }  

PHP

          if($num > 0) 
            {
              //if record found
                $_SESSION["loggedin"] = TRUE;
                $_SESSION['cid']=$num['cid'];

                echo "success";

            }

Upvotes: 0

Mitko Delibaltov
Mitko Delibaltov

Reputation: 485

*Update There seems to be nothing bad to echo the data as @Patrick Q mentioned below. Could you try to trim the data received in javascript/jquery to check for unexpected whitespaces

data.trim()

If you want to add more variables you could do the solution below. (or if you prefer it)

You should not echo the result of the ajax. Instead you should return it as json

PHP file:

$ajax_result = array():
$ajax_result['success'] = false;
$ajax_result['message'] = 'Incorrect login data';

if(something)
{
    $ajax_result['success'] = 'login_success';
    $ajax_result['message'] = 'You were logged in. You will be redirected now.';
}

header('Content-type:application/json;charset=utf-8');
echo json_encode($ajax_result);

That would return the result as array to the front-end and you can operate with it by selecting variables with data.success or data.message etc.

Jquery/Javascript:

     $.ajax({  
       url:"sql/login_process.php",  
       method:"POST",  
       data:$('#login_form').serialize(),  
       beforeSend:function(){  
            $('#login_response').html('<span class="text-info"><i class="fas fa-spinner"></i> Loading response...</span>');  
       },  
       success:function(data){  
            $('form').trigger("reset");  
            $('#login_response').fadeIn().html(data.message);  
            setTimeout(function(){  
                 $('#login_response').fadeOut("slow");  
            }, 7000);

            if(data.success == "login_success") location.href = "http://www.example.com/myprofile.php";
       }  
  }); 

This is the most basic use. You can modify it to have protection to be accessed only from ajax queries and etc.

Upvotes: 1

Related Questions