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>