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 & Password to Login :
</strong></span><br>
<br>
<span class="style1">Username : </span> 
<input name="user" id="user" type="text">

<br><span class="style1">Password   :</span>  
<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>