Hi all this sample code lets you to create a input box which scans for the entered E-Mail ID while user starts typing the ID
and tells whether the mail ID already exists or not in the MySQL database.
Follow these simple steps and create the following files with the example code given in the article.
and tells whether the mail ID already exists or not in the MySQL database.
Follow these simple steps and create the following files with the example code given in the article.
- Create a Dynamic Web Project or Maven Project with (web-app archtype).
- Create index.jsp and dataFetcher.jsp inside webapp folder
- And one more js folder which contains our java script files inside webapp.
- Create Ajax_DB.js file inside js folder.
- Create the respective database and tables in the backed for DB connections. In this tutorial MySQL DB is used.
- Use the code given below in the respective files and finally run the project.
index.jsp
<html>
<head>
<script src="./js/Ajax_DB.js"></script>
</head>
<body>
<h2>To fetch data from DB using AJAX calls(E-Mail validation)</h2>
<!-- Use GET whenever possible because it is faster than post and it is especially
useful in AJAX calls since we need quicker response and hence here get is used. -->
<form method="get" name="frmData">
Enter E-Mail ID : <input name="mail" type="email" required="required"
onkeyup="sendInfo()">
<!-- Here span tag is used to print the response text coming from the server -->
<span id="val"></span>
</form>
</body>
</html>
dataFetcher.jsp
<!-- This jsp is used read data from the DB -->
<%@page import="java.sql.*"%>
<%
String s = request.getParameter("val");
if (s == null || s.trim().equals("")) {
out.print("Please enter valid email");
} else {
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/ajax", "userName",
"password");
PreparedStatement ps = con
.prepareStatement("select * from emails where email=?");
ps.setString(1, s);
ResultSet rs = ps.executeQuery();
if (rs.next())
out.print("Already registered");
else
out.print("Id available");
con.close();
} catch (Exception e) {
e.printStackTrace();
}
}
%>
Ajax_DB.js
/**
* Ajax DB operations javascript.
*/
function sendInfo() {
/**
* Function to send user entered keystrokes to DB and check whether the
* entered e-mail ID already exists or not using AJAX calls while the user
* is typing itself.
*/
var request;
var value = document.frmData.mail.value;
var url = "./dataFetcher.jsp?val=" + value;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
try {
/*
* calling the getInfo function on readystatechange event.
*/
request.onreadystatechange = getInfo;
request.open("GET", url, true);
request.send(); // this is the one which is responsible to send data to
// the server in the backend and get the response
} catch (e) {
alert("Unable to connect to server");
}
function getInfo() {
if (request.readyState == 4) {
var val = request.responseText; // gives response as a string
// responeXML can be used to get the
// XML output.
document.getElementById('val').innerHTML = val; // printing the
// response into the
// span tag of the
// form.
}
}
}
No comments:
Post a Comment