Authentication With AJAX and PHP

THE IDEA

You want to ask the user to enter a name and password in a login form. If the name and password entered by the user matches with the contents in the server side script, your user should get a welcome message, otherwise a message should declare that they are an ‘Unauthorized user’.

Implementation

Let’s create an HTML file that displays two labels: ‘Enter your Name’ and ‘Enter your Password’ and two input text fields and a submit button and an empty div element. The HTML file should appear like this (place following code inside your body tag):

 Enter your Name
  

 Enter your Password
  

 

You can see that the HTML file contains the two input text fields that are assigned class names uname and passwd for the purpose of accessing them via jQuery code. Below the form is an empty div element of id message which we will be using for displaying the response generated by the server side script.

AJAX and jQuery code:

$(document).ready(function() {
 $('#submit').click(function () {
  var name = $('.uname').val();
  var pwd = $('.passwd').val();
  var data='uname='+name+'&password='+pwd;
  $.ajax({
   type:"POST",
   url:"logincheck.php",
   data:data,
   success:function(html) {
    $("#message").html(html);
   }
  });
  return false;
 });
});

The script file logincheck.php on the server validates the name and password entered by the user, and looks like this:

logincheck.php

$name = trim($_POST['uname']);
$pswd = trim($_POST['password']);
if(($name=="guest") && ($pswd=="jquery"))
  echo "Welcome ". $name;
else
  echo "Sorry you are not authorized";

And we are ready to go! Check your working AJAX Authentication application. Too sleepy to write got to go, knock me if you are stuck anywhere, bye bye :)...

Displaying Welcome Message With AJAX, jQuery and PHP

Idea

You have a label, an input text field, and a submit button on a form, and you want a welcome message be displayed to the user when they select the submit button – once they have entered their name in the input text field.

Implementation

First of all, let’s create the HTML file that contains a label element, an input text field, a submit button, and an empty div element. The HTML file should look like this:

  

    Enter your Name
     

    
  
  

You can see that the HTML file contains a label, an input text field, and a submit button nested in a form. The input text field is given the class name uname for the purpose of accessing it via our jQuery code that we’re about to write. Below the form is an empty div element of id message which we will use for displaying the welcome message to the user.

Before moving forward needless to mention that as I'm going use jQuery functionality, you have import jQuery inside you head tag. You can download the latest release from here. If you are not familiar with jQuery(Are you kidding me :@) visit here to find out how to import jQuery to a site

The jQuery and AJAX code for our solution looks like this

$(document).ready(function(){
  $('#errorMsg').hide();

  $('#submit').click(function(){
   var name = $('.uname').val();
   //Checking if the input field is empty
   if( name != ''){
    var data = 'uname=' + name;

    //Making the Ajax call
    $.ajax({
     type: "POST",
     url: "welcome.php", //url of you php file.
     data: data,
     success: function(html){
      $('#form').hide();
      $('#errorMsg').hide();
      $('#message').html(html);
     }
    });
   } else{//if the name field is empty showing th erroe message
    $('#errorMsg').show('fast');    
   }
   return false;
  });
 });

The script file welcome.php on the server is as follows

welcome.php

$name = $_POST['uname'];
echo "Welcome ". $name;

Don't forget to place this code in between a php tag
Finally check out your functional AJAX page

Now we can simply make this job done by making a POST Request of jQuery.

Making POST requests

For making POST requests to the server, we make use of the $.post() method, which you’ll use most generally when you want to make some modification in the information stored on the server. It fetches the data onto the server using POST HTTP request. It executes the script whose URL is specified along with the parameters passed (if any). This function also allows a single callback function to be specified that will be executed when the request is complete. Here’s the method and parameters:

$.post(url, parameters, callback)

• url is the server-side script to which we want to send request (via the POST method)
• parameters is key/value pair that we want to be passed to the server-side script for processing
• callback is the function that is invoked on completion of the request. It contains two parameters, the first is the response from the server side script and the second parameter is the status of execution

The previous JavaScript file can therefore be modified to use the $.post() method as follows:

  $(document).ready(function() {
    $('#submit').click(function () {
      var name = $('.uname').val();
      var data = 'uname=' + name;
      $.post(
        "welcome.php",
        data,
        function (html) {
          $('#message').html(html);
        }
      );
      return false;
    });
 });

You can see that the $.post() method invokes the welcome.php file on the server and passes uname=name to it as a parameter (where name stores the name entered by the user) and the callback function displays the response (from the server) by assigning it to the div element of id message.

Finally, please do remember that the server side script welcome.php must access the data from the $_POST array and not from the $_GET array beacuse the request sent is via the POST method:

And yes of course you can use the $.get() method in this same way but in that case you must access the data from the $_GET[] array. $.get(url, parameters, callback)

welcome.php for $.get() request

$name = $_GET['uname'];
echo "Welcome ". $name;

Thanks for your precious time on my content, I will appreciate you feedback. Don't burn you head if you have anything on it right now, just through it to me. xD