Here you will get an example of AJAX with JSP using jQuery.
AJAX is used for sending and receiving data from server without reloading the page. We can implement AJAX easily using jQuery. It provides various methods for AJAX functionality.
I have created this example using Eclipse IDE. Below I have shared detailed steps for this.
AJAX with JSP Using jQuery Example
1. First create dynamic web project by going to File>New>Dynamic Web Project.
2. Now give any name and click on Finish to create the project.
3. To use jQuery in our code we need to download the jQuery library. Go to below link and download the development version of jQuery library.
Download link: https://jquery.com/download/
4. After that copy and paste it in WebContent folder in your project. See below screenshot.
5. Create two files index.jsp and content.jsp in WebContent folder. Copy and paste following code in respective files.
index.jsp
<html>
<head>
<title>AJAX With JSP Using jQuery</title>
<script src="jquery-1.11.3.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$.get("content.jsp",function(data){
$("h2").html(data);
});
});
});
</script>
</head>
<body>
<h2></h2>
<input type="button" id="btn" value="Show"/>
</body>
</html>
content.jsp
<%out.print("This is AJAX with JSP using jQuery");%>
6. Finally run your project on server.
Output
Explanation
The jQuery code is written inside head section. For using jQuery library we have to include it on our page. I have done this by providing the source of library in <script src=””></script> tag.
When we click on Show button, the get() function handles AJAX GET request and fetch data from server. Its first argument is the url of the page from where data is to be fetched. In second argument another function is called, the information fetched from server is stored in data. Finally we are writing the data in h2 tag using html() function.
Comment below if you are facing any problem.
Happy Coding!! 🙂 🙂
very nice article.Easy to use for ajax beginner
Thanks for this
Explained nicely !!