Share on Google+Share on Google+

Login through database with the help of jQuery 'ajax' & JSP

Advertisement
In this tutorial, we will discuss about how to use ajax function of jQuery to create a login page , which has a JSP page to perform database connection.

Login through database with the help of jQuery 'ajax' & JSP

In this tutorial, we will discuss about how to use ajax function of jQuery to create a login page , which has a JSP page to perform database connection. In this example , login page contain jQuery ajax to make connection with JSP ,which is use to connect to database and check authenticity of user . And if user is correct , it shows a welcome quote. The script file has also a fade-in effect, which displays output with fade-in effect.

loginValidation.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>
Validate login from database table using jQuery JSP & jQuery 
</TITLE>

  <script src="jquery-1.4.2.js"></script>
  <script src="loginValidation.js" type="text/javascript"></script>
   <style type="text/css">
.style1 {
  color: #0000FF;
}
.style3 {
  color: #CC0066;
}
</style>
 </HEAD>

 <BODY>
   <div>
<form id="formL" name="formL" method="post" onsubmit="return false;">
<span class="style3"><strong>Enter Username &amp; Password to Login :
</strong></span><br>

<br>
<span class="style1">Username :&nbsp;</span>&nbsp;
<input name="user" id="user" type="text">
      
<br><span class="style1">Password   :</span>&nbsp;&nbsp;
<input name="pass" id="pass" type="password">
      
    
<br><input name="button" id="button" value="Submit" type="submit">
</form>
</div>
<div id="targetDiv" style="display: none;">
</div>

 </BODY>
</HTML>

loginValidation.js

$(document).ready(function(){
  //global vars
  var userName = $("#user"); //user name field
  var userPass = $("#pass"); //password field
  

  //function to check name and comment field 
  function checkCommentsForm(){
    if(userName.attr("value") && userPass.attr("value"))
      return true;
    else
      return false;
  }

  //When form submitted
  $("#formL").submit(function(){
    if(checkCommentsForm()){
      $.ajax({
        type: "post"
       , url: 
"loginValidation.jsp"
       ,data: 
"user="+userName.val()+"&pass="+userPass.val(),
       success: function(msg) {$('#targetDiv').hide();$("#targetDiv").html ("<h3>" + msg + "</h3>").fadeIn("slow");}
        });
        }
    else alert("Please fill UserName & Password!");
    return false;
  });
});

loginValidation.jsp

<%page language="java" import="java.sql.*" %>
<%
response.setContentType("text/html");
String userName=request.getParameter("user");
String userPass=request.getParameter("pass");
%>
<h2><font color=blue>
<%
    String connectionURL = 
"jdbc:mysql://192.168.10.13:3306/ankdb";
    Connection connection=null;
    ResultSet rs;
    String userNam=new String("");
    String passwrd=new String("");
  String name=new String("");
    response.setContentType("text/html");
    try {
       // Load the database driver
      Class.forName("com.mysql.jdbc.Driver");
      // Get a Connection to the database
      connection = DriverManager.getConnection(connectionURL, "root""root"); 
      //Add the data into the database
String sql = "select user,password from jqlogin";
  Statement s = connection.createStatement();
  s.executeQuery (sql);
   rs = s.getResultSet();
   while (rs.next ()){
    userNam=rs.getString("user");
    passwrd=rs.getString("password");
    if(userNam.equals(userName)&&passwrd.equals(userPass)){
        name=userNam;
      }
       }
    rs.close ();
      s.close ();
      }catch(Exception e){
      System.out.println("Exception is ;"+e);
      }
      if(name.equals(userName))
    {
  %>
  <font color="red">Welcome</font>
  <%
      out.println(name);
   }
    else{
    out.println("You are not an authentic person"); 
      }
%>
</font></h2>

OUTPUT

When login is incorrect :

When login is correct , it shows :

Download Source Code

Advertisements

Posted on: July 30, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.