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


 

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 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

Ads