Simple Ajax Login Tutorial

摘要: 利用php/ajax 简单的登陆界面

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 = 'dongchao';
$password = '123456';
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
}