Ajax
Form submission without page load or
refresh using Java + JSP + Javascript + jquery –
Explanation
-
- On click of save button , Form data will be store in Database and a message will be appear .
- To do this , we call a javascript method where ajax code is written to submit the data without page load and refresh .
Code –
<%@ page language="java" contentType="text/html;
charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<title>Be Ready 2 Code</title>
<style>
table {
width: 35%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
}
input[type=button]{
width: 100px;
height:30px;
padding:0px 7px;
font-weight:bold;
font-size: large;
}
</style>
<script type="text/javascript">
function saveDataAjax()
{
var xmlhttp;
//xmlhttp variable
for ajax object
var
name=document.getElementById("name").value;
var
empCode=document.getElementById("empCode").value;
//read the values of
form , to send them to server with URL
var
email=document.getElementById("email").value;
var
mobile=document.getElementById("mobile").value;
var url="saveRecord.jsp?name="+name+"&empCode="+empCode+"&email="+email+"&mobile="+mobile;
//make url with
query String
if
(window.XMLHttpRequest)
{
// code for IE7+,
Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
//if above mentioned
browser , then it will creates the xmlhttp object with the help of this code
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
//if above mentioned
browser , then it will creates the xmlhttp object with the help of this code
}
xmlhttp.open("POST",url,true);
//open method
initiate the ajax request , it contain three method which is already discussed
//or
//xmlhttp.open("POST",url);
//as third
parameter's default value is true i.e, Asynchronus request
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//it will check
whether request is completed and response is ready or not , if yes then, set
response in a particular div like below code
//alert(xmlhttp.responseText);
document.getElementById("ajaxResult").innerHTML=xmlhttp.responseText;
//here 'ajaxResult'
is a div, where we set/put the ajax response
}
}
xmlhttp.send(null);
//after job done, we
need to set the xmlhttp object refrence as null .this line will do the same job.
}
</script>
</head>
<body>
<center>
<form id='register' method='post' >
<table>
<tr bgcolor="#6E6E6E"
height="35px" align="center">
<td colspan="3">
<b>Employee Registration</b>
</td>
</tr>
<tr >
<td width="45%"
align="right"> Full Name </td>
<td width="10%"
align="center">:</td>
<td width="45%"><input type='text' name='name' id='name' maxlength="50"
/></td>
</tr>
<tr>
<td width="45%"
align="right">Employee Code</td>
<td width="10%"
align="center">:</td>
<td width="45%"><input type='text' name='empCode'
id='empCode' maxlength="50"
/></td>
</tr>
<tr>
<td width="45%"
align="right">Email Address</td>
<td width="10%"
align="center">:</td>
<td width="45%"><input type='text' name='email' id='email' maxlength="50"
/></td>
</tr>
<tr >
<td width="45%"
align="right">Mobile No. </td>
<td width="10%"
align="center">:</td>
<td width="45%"><input type='text' name='mobile' id='mobile' maxlength="50"
/></td>
</tr>
<tr bgcolor="#6E6E6E"
height="35px" align="center">
<td colspan="3" align="center"
style="height:30px,width:30px;">
<input type="button"
name="Save" value="save"
id="btnSave" onclick="return
saveDataAjax();"/>
</td>
</tr>
</table>
<div id="ajaxResult">
<!— div where result or ajax
response will be displayed -->
</div>
</form>
</center>
</body>
</html>
No comments:
Post a Comment