AJAX PHP LOGIN Page is not redirecting correctly

Question

Basically I've got a AJAX Login page that is working and everything but when I successfully login I want it to redirect to a page without it reloading I'm not sure how its done as I am very new to langauge. Many thanks

index.php
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Popup Login</title>
<script type="text/javascript">
$(document).ready(function(){
    $("#login_a").click(function(){
        $("#shadow").fadeIn("normal");
         $("#login_form").fadeIn("normal");
         $("#user_name").focus();
    });
    $("#cancel_hide").click(function(){
        $("#login_form").fadeOut("normal");
        $("#shadow").fadeOut();
   });
   $("#login").click(function(){

        username=$("#user_name").val();
        password=$("#password").val();
         $.ajax({
            type: "POST",
            url: "login.php",
            data: "name="+username+"&pwd="+password,
            success: function(html){
              if(html=='1')
              {
                $("#login_form").fadeOut("normal");
                $("#shadow").fadeOut();
                $("#profile").html("<a href='logout.php' id='logout'>Logout</a>");

              }
              else
              {
                    $("#add_err").html("Wrong username or password");
              }
            },
            beforeSend:function()
            {
                 $("#add_err").html("Loading...")
            }
        });
         return false;
    });
});
</script>
</head>
<body>
<?php session_start(); ?>
    <div id="profile">
        <?php if(isset($_SESSION['user_name'])){
            ?>
            <a href='logout.php' id='logout'>Logout</a>
        <?php }else {?>
        <a id="login_a" href="#">login</a>
        <?php } ?>
    </div>
    <div id="login_form">
        <div class="err" id="add_err"></div>
        <form action="login.php">
            <label>User Name:</label>
            <input type="text" id="user_name" name="user_name" />
            <label>Password:</label>
            <input type="password" id="password" name="password" />
            <label></label><br/>
            <input type="submit" id="login" value="Login" />
            <input type="button" id="cancel_hide" value="Cancel" />
        </form>
    </div>
    <div id="shadow" class="popup"></div>
</body>
</html>

login.php

    <?php
 session_start();
 $username = $_POST['name'];
 $password = $_POST['pwd'];
 $mysqli=mysqli_connect('');
 $query = "SELECT * FROM user WHERE username='$username' AND password='$password'";
 $result = mysqli_query($mysqli,$query)or die(mysqli_error());
 $num_row = mysqli_num_rows($result);
 $row=mysqli_fetch_array($result);
 if( $num_row >=1 ) {
  echo '1';
  $_SESSION['user_name']=$row['username'];
 }
 else{
 echo 'false';
 }
?>

Answer 1

When I successfully login I want it to redirect to a page without it reloading

As long as the page to be redirected to is on the same domain, or you can set CORS headers properly, and you can deal with relative links, then in your success callback you can replace the entire page's HTML with that of the new page.

You can start another ajax call for your new page, and use document.write() to obliterate the existing HTML like so:

...
success: function(html){
    if(html=='1') {
        $("#login_form").fadeOut("normal");
        $("#shadow").fadeOut(400, function(){

            // Completely replace the page's HTML
            $.ajax({
                type: 'GET',
                url: 'http://example.com/logged-in',
                async: false, // You want this synchronous
                success: function(data) {

                  // This code block replaces your current page seamlessly
                  document.open();
                  document.write(data);
                  document.close();

                },
                error: function(e){
                   alert(e.message);
                }
            });
        });
    }
    ...

Here is a demo:

 $("#bye").fadeOut(1400, function(){ $.ajax({ type: 'GET', url: 'http://enable-cors.org/', async: false, success: function(data) { // This is a quick-n-dirty hack // to get the relative links working for the demo var base_href = '<base href="http://enable-cors.org/">'; document.open(); document.write(base_href + data); document.close(); }, error: function(e){ alert(e.message); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="bye"><h1>Logged in Successfully</h1></div>

AJAX PHP LOGIN Page is not redirecting correctly

Question

1 answers

solution1
0 ACCPTED 2015-04-29 16:23:11

AJAX PHP LOGIN Page is not redirecting correctly

Question

1 answers

solution1 0 ACCPTED 2015-04-29 16:23:11

solution1
0 ACCPTED 2015-04-29 16:23:11