Tuesday, 29 November 2016

Search Operation in AJAX

index.html

<!DOCTYPE html>
<html>
<head>
<script>
var request=new XMLHttpRequest();
function searchInfo(){
var name=document.vinform.name.value;
var url="index.jsp?val="+name;

try{
request.onreadystatechange=function(){
if(request.readyState==4){
var val=request.responseText;
document.getElementById('mylocation').innerHTML=val;
}
}//end of function
request.open("GET",url,true);
request.send();
}catch(e){alert("Unable to connect to server");}
}
</script>
</head>
<body>
<h1>Search Employee Using Ajax.</h1>
<form name="vinform">
<input type="text" name="name" onkeyup="searchInfo()">
</form>

<span id="mylocation"></span>
</body>
</html>

index.jsp

<%@ page import="java.sql.*" %>
<%
String name=request.getParameter("val");
if(name==null||name.trim().equals(""))
{
out.print("<p>Please enter name!</p>");
}

else
{
try
{
   Class.forName("com.mysql.jdbc.Driver");
    Connection  con = DriverManager.getConnection("jdbc:mysql://localhost:3306/employee", "root", "sagan");

PreparedStatement ps=con.prepareStatement("select * from emp where empname like '"+name+"%'");

ResultSet rs=ps.executeQuery();

if(!rs.isBeforeFirst())
{  
 out.println("<p>No Record Found!</p>");
}
else
{
out.print("<table border='1' cellpadding='2' width='50%'>");
out.print("<tr><th>Id</th><th>Name</th><th>Address</th></tr>");
while(rs.next()){
out.print("<tr><td>"+rs.getString(1)+"</td><td>"+rs.getString(2)+"</td><td>"+rs.getString(3)+"</td></tr>");
}
out.print("</table>");
}//end of else for rs.isBeforeFirst
con.close();
}catch(Exception e){out.print(e);}
}//end of else
%>


Output:







No comments:

Post a Comment