Simple Ajax Login Tutorial

Ajax (an acronym for asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page.

in this post I will explain (line by line code commentary) how to create a simple ajax login page using JQuery and PHP

the Form (ajax submit) index.php

<form method="POST"><!-- We can use GET also as submitting method-->
<label>Username</label>
<input id="username" name="username" type="text"><!-- the username input -->
<label>Password</label>
<input id="password" name="pasword" type="password"><!-- the password input -->
<input id="submit_login" name="submit" value="Login" type="submit"><!-- submit button -->
<span class="errormess"></span><!-- the ajax result wrapper -->
</form>

the JQuery Code (ajax processor) functions.js

$(function() {
  $("#submit_login").click(function() { // if submit button is clicked
    var username = $("input#username").val(); // define username variable
    if (username == "") { // if username variable is empty
       $('.errormess').html('Please Insert Your Username'); // printing error message
       return false; // stop the script
    }
    var password = $("input#password").val(); // define password variable
    if (password == "") { // if password variable is empty
       $('.errormess').html('Please Insert Your Password'); // printing error message
       return false; // stop the script
    }
 
    $.ajax({ // JQuery ajax function
      type: "POST", // Submitting Method
      url: 'login.php', // PHP processor
      data: 'username='+ username + '&password=' + password, // the data that will be sent to php processor
      dataType: "html", // type of returned data
      success: function(data) { // if ajax function results success
      if (data == 0) { // if the returned data equal 0
      $('.errormess').html('Wrong Login Data'); // print error message
      } else { // if the reurned data not equal 0
      $('.errormess').html('<b style="color: green;">you are logged. wait for redirection</b>');// print success message   
      document.location.href = 'private.php'; // redirect to the private area  
      }
      }
     });
    return false;
    });
});

the PHP Code (php processor) login.php

session_start();
// define a username and password for test you can change this to a query from database or anything else that fetch a username and password
$username = 'demouser';
$password = 'demopass';
if (isset($_POST)) { // if ajax request submitted
    $post_username = $_POST['username'] 
; // the ajax post username
    $post_password = $_POST['password'] 

; // the ajax post password
    if ($username == $post_username && $password == $post_password) { // if the username and password are right
    $_SESSION['username'] 


 = $post_username; // define a session variable
    echo $post_username; // return a value for the ajax query
    }
}

the Private Area (to check if the code is work or not) private.php

session_start();
if (!isset($_SESSION['username'] 


)) { // if the session variable is not exists
echo 'You are not logged. <a href="index.php">login</a>'; // print error message
} else { // if the session variable is exists
echo 'hello <b>'.$_SESSION['username'] 
.'</b> you are logged in. <a href="logout.php">logout</a>'; // print welcome message
}

Download Simple Ajax Login Tutorial Files