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

Home Tutorial Jquery 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.

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>

OUTPUT

When login is incorrect :

When login is correct , it shows :

Download Source Code

Related Tags for Login through database with the help of jQuery 'ajax' & JSP:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics