Shawn McCool

16 Responses to “AJAX with jQuery: A Simple Login Example”

1. Justin says:

   April 22, 2009 at 9:51 pm

   Very helpful. Nice follow up to the “What Exactly is JSON?” post. These are great posts.

   Could you build on this login example? I want to build a login form that checks against a database of existing usernames as the user enters their name in the field.
2. ShawnMcCool says:

   April 24, 2009 at 9:42 am

   I’m working on a short series of Code Igniter PHP framework screencasts that really should be made before I dig into something that requires an infrastructure. I’ll try to get that up over the next couple of weeks. Thanks for the feedback.
3. Dex Barrett says:

   June 24, 2009 at 9:15 pm

   Thanks dude, i was trying to make a simple login making my own Ajax functions but i started having problems with it because the login check didnt really worked -it used to redirect before ajax responsetext arrived-. This is really what i was looking for. I already knew JQuery library but i wanted to keep it simple. But from now i’ll let Jquery do the dirty job. Great site.
4. Darren Nolan says:

   August 2, 2009 at 9:48 am

   Very impressed with your work. Very much so. I’ve been programming in PHP for years now, but when it comes to JavaScript I’m pretty limited. This was just what I was looking for in the next step towards having Ajax solutions in my projects.
5. John says:

   August 13, 2009 at 12:13 am

   Hellow, that’s an wonderful video. It’s really helpful for me. I was looking forward including jquery in my project and hopefully include the login form in my web project. Thanks again.
6. Helder says:

   September 28, 2009 at 10:17 pm

   Very nice job! I’m waiting for the next jquery + ajax and CI videos.
7. dani says:

   October 22, 2009 at 11:24 am

   This tutorial provides an understanding of jquery
8. Gagan Shrestha says:

   November 7, 2009 at 10:35 am

   i did what the screen cast did but did not get the result as it shows
   Actually the callback function(data) didn’t get the value passed from the php page.
   i have shown my code given below
   my php page is
   exec($sql);
   $rec = $ado->fetch($result);
   $count=$ado->count($result);
   echo $count;
   //if username exist
   //compare the password
   echo “passwrod from database “.$rec['password'];” “;
   echo “password from user “.$password;
   if($rec['password']==$password)
   {
   //now set the session from here if needed
   // $_SESSION['u_name']=$username;
   $data['success']=true;
   $data['redirect']=’/user’;
   }
   else {

   $data['success']=false;
   $data['message']=”your message is wrong….”;

   }
   echo json_encode($data);

   ?>

   and my javascript ajax call is
   $(document).ready(function()
   {
   $(“#login_form”).submit(function(){
   //remove all the class add the messagebox classes and start fading
   //check the username exists or not from ajax

   $.post(“ajax_login.php”,
   {
   username:$(‘#username’).val(),
   password:$(‘#password’).val()
   } ,function(data){
   if(data.success) {
   alert(“you are authenticated”);
   location.href=data.redirect;
   }
   else {
   alert(“you are not authenticated”);
   }

   },’json’);
   return false; //not to post the form physically
   });
   });

   please help me did i missed some thing?
   Any help would be great…
9. Shawn McCool says:

   November 8, 2009 at 2:34 pm

   @Gagan

   You need to make sure that your ajax_login.php is only returning a json object, no additional data. One good way to do this would be to use the Firefox extension “Firebug”. You can open the firebug console and enable it for your page. Then, when you try to execute your script you’ll see the specific call it makes to ajax_login.php. You’ll be able to see both what is sent (the request) and the response. The response must be a valid json object. I notice that you’re ‘echo’ing quite a few extra values. I understand that this may have been debug code, but it will break jQuery’s interpretation of the results.
10. Mr. Haynes says:

    November 26, 2009 at 9:47 am

    I have tried several times but I cannot get the error message piece to work, it just does not show up?

    Log In

    Username:
    Password:

    </html
11. Amy Crompton says:

    December 6, 2009 at 9:35 am

    Great example that degrades very well.

    Thanks
12. widi dwi says:

    December 30, 2009 at 6:10 am

    wow …. this tutorial is help me alot ,thx. i`ll wait for another tutorial ..
13. Diraj says:

    January 6, 2010 at 10:41 am

    Great job!….I have gone through some many tutorials before but I dint get anything out of them, but this one helped me to understand step by step..
14. indra says:

    January 22, 2010 at 10:42 am

    veryyyyyyy usefull thank, you so awesome
15. Johnny says:

    February 7, 2010 at 12:03 am

    wish the code was available this is what im looking for.. but stopping and typing out the code is going to be a pain.

    i also need to convert this to a mysql check too

    thanks for the tut tho
16. Shawn McCool says:

    February 7, 2010 at 11:57 am

    @Johnny

    I’ll be adding the code to the post shortly.