This is the best approach to implement Ajax in a web application, now $.ajax() mostly used to implement ajax operations because we can easily send data from one web page to another.
we will use Jquery code to implement $.ajax()
Syntax of Jquery
$(document).ready(function(){
});
Syntax to implement .$ajax():-
$.ajax({
type: "post",
url: "urlname", //this is my servlet
data: "args=" +value,
success: function(msg){
output
}
});
Complete Code of Jquery with ajax on JSP Web page
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@page import="java.sql.*" %>
<%@page import="dal.*" %>
<!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>Insert title here</title>
<style type="text/css">
table
{
width:800px;
margin-top:10px;
margin-left:20px;
}
table tr th
{
background-color: black;
color:white;
border:1px solid white ;
font-weight:bolder;
font-size:25px;
}
table tr td
{
background-color:orange;
text-align: center;
border:1px solid black;
}
input[type="text"]
{
height:30px;
border:1px solid black;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#txtsearch").keyup(function(){
$.ajax({
type: "post",
url: "searchdata.jsp", //this is my servlet
data: "q=" +$(this).val(),
success: function(msg){
$('#res').html(msg);
}
});
});
});
</script>
<%
if(session.getAttribute("sessionaid")==null)
{
response.sendRedirect("Login.jsp");
}
%>
</head>
<body>
<a href="viewcustomer.jsp">Home</a>
<a href="../LogoutAdminSer">Logout</a>
<tr><th colspan="7"><input type="text" name="txtsearch" id="txtsearch" placeholder="search here by name" /></th></tr>
<div id="res">
<table cellpadding="0" cellspacing="0">
<tr><th colspan="7">View Customer Info here</th></tr>
<tr><th>ID</th><th>Username</th><th>Password </th><th>Email</th><th>Mobile</th><th>EDIT|DELETE</th></tr>
<%
JDBCExample2.connect();
ResultSet res= JDBCExample2.showdata();
while(res.next())
{ %>
<tr><td><%= res.getString(1) %></td><td><%= res.getString(2) %></td><td><%= res.getString(3) %></td><td><%= res.getString(4) %></td><td><%= res.getString(5) %></td>
<td><a href="Edit.jsp?q=<%= res.getString(1) %>"><img src="edit.jpg" style="width:30px;height:30px;" /></a> <a href="Delete.jsp?q=<%= res.getString(1) %>"><img src="delete.jpg" style="width:30px;height:30px;" /></a></td>
</tr>
<%
}
%>
</table>
</div>
</body>
</html>
Code of SearchData.jsp web page:-
<%@page import="java.sql.*" %>
<%@page import="dal.*" %>
<table cellpadding="0" cellspacing="0">
<tr><th colspan="7">View Customer Info here</th></tr>
<tr><th>ID</th><th>Username</th><th>Password </th><th>Email</th><th>Mobile</th><th>EDIT|DELETE</th></tr>
<%
JDBCExample2.connect();
ResultSet res=JDBCExample2.showdata1(request.getParameter("q"));
while(res.next())
{ %>
<tr><td><%= res.getString(1) %></td><td><%= res.getString(2) %></td><td><%= res.getString(3) %></td><td><%= res.getString(4) %></td><td><%= res.getString(5) %></td>
<td><a href="Edit.jsp?q=<%= res.getString(1) %>"><img src="edit.jpg" style="width:30px;height:30px;" /></a> <a href="Delete.jsp?q=<%= res.getString(1) %>"><img src="delete.jpg" style="width:30px;height:30px;" /></a></td>
</tr>
<%
}
%>
POST Answer of Questions and ASK to Doubt