Tutorial

jQuery AJAX JSP Servlet Java Example

Published on August 3, 2022
Default avatar

By Pankaj

jQuery AJAX JSP Servlet Java Example

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Ajax in Java JSP Servlet based web applications are very common. Recently I have written a lot about jQuery methods and how we can use them. Today we will look into one of the important jQuery functionality where we can easily execute AJAX calls and process the response in a Java Servlet JSP based web application.

Ajax JSP Servlet Example

I am using Eclipse IDE for creating the “Dynamic Web Project”, you can use any other IDE too. Our main focus will be towards jQuery and AJAX call from JSP to a servlet. Below image shows the final project structure. AJAX Java, Ajax JSP, Ajax Servlet, Ajax JSP Example

Ajax Servlet Code

We have a very simple servlet that gets the userName from request, create a greetings and return it as plain text.

package com.journaldev.servlets;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/GetUserServlet")
public class GetUserServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		String userName = request.getParameter("userName").trim();
		if(userName == null || "".equals(userName)){
			userName = "Guest";
		}
		
		String greetings = "Hello " + userName;
		
		response.setContentType("text/plain");
		response.getWriter().write(greetings);
	}

}

Notice that I am using Servlet-3 annotations for configuration, if you like XML based configuration then you can do it in web.xml file. We will call this servlet asynchronously using jQuery AJAX support.

Ajax JSP Page

Below is our JSP page code, it has an input field where we can provide user name. As soon as focus is moved out of it, jQuery AJAX method will execute and call our servlet and process the response. index.jsp code:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery, Ajax and Servlet/JSP integration example</title>

<script src="https://code.jquery.com/jquery-1.10.2.js"
	type="text/javascript"></script>
<script src="js/app-ajax.js" type="text/javascript"></script>
</head>
<body>

	<form>
		Enter Your Name: <input type="text" id="userName" />
	</form>
	<br>
	<br>

	<strong>Ajax Response</strong>:
	<div id="ajaxGetUserServletResponse"></div>
</body>
</html>

Notice that we have two JS files included in the JSP page, first one is the jQuery JS library and another one contains our JS code for ajax call. I am including jQuery JS from the code.jquery.com URL, we can also download it and keep with our JS file. JSP code is very simple, we will populate ajaxGetUserServletResponse div content from the AJAX call response through jQuery.

jQuery AJAX JavaScript File

Below is our javascript file code for jQuery AJAX request. app-ajax.js code:

$(document).ready(function() {
        $('#userName').blur(function(event) {
                var name = $('#userName').val();
                $.get('GetUserServlet', {
                        userName : name
                }, function(responseText) {
                        $('#ajaxGetUserServletResponse').text(responseText);
                });
        });
});

We can also make jQuery AJAX call using it’s ajax() method, as shown below. Above is the shorthand approach to using ajax() method.

$(document).ready(function() {
	$('#userName').blur(function() {
		$.ajax({
			url : 'GetUserServlet',
			data : {
				userName : $('#userName').val()
			},
			success : function(responseText) {
				$('#ajaxGetUserServletResponse').text(responseText);
			}
		});
	});
});

Below is the syntax of the jQuery ajax() method, try to relate it to the above code and you will understand what’s going on here.

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Our jQuery Ajax JSP Servlet Example application is ready, just build and deploy it in your favorite servlet container. Below image shows the output produced, I am using Chrome Developer tools to confirm that our servlet is getting called. jQuery AJAX Example, Ajax JSP, Ajax servlet, Ajax Java

Ajax JSP Servlet Example Summary

We learned the basics of jQuery AJAX support and how we can integrate it with Java web application, in next tutorials we will learn more features of jQuery that we can use in any web application. You can download the final project from the below link.

Download jQuery AJAX Java Web Application Project

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Pankaj

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
JournalDev
DigitalOcean Employee
DigitalOcean Employee badge
January 11, 2020

if i have multiple value then what should i do in java controller please tell me

- hemant

    JournalDev
    DigitalOcean Employee
    DigitalOcean Employee badge
    December 4, 2019

    I got this example working easily. Thank you very much. Some specifics about my experience: 1) I am using eclipse and tomcat. 2) To make your servlet, I right-clicked in eclipse on my project in the project explorer and chose “new - > servlet” and then used your convenient copy button to help copy-paste your servlet code into my new servlet source file. 3) I was nervous about using your code.jquery.com version of jquery since it is http and not https, but fortunately I didn’t need to use it, since my code already referred to cdnjs.cloudflare.com which is https. /Eric Osman 4-dec-2019 Feel free to reach me here: eric osman at rcn dot com

    - Eric Osman

      JournalDev
      DigitalOcean Employee
      DigitalOcean Employee badge
      July 30, 2019

      Hi, i have a request kindly tell me can i call a .net service through this ajax call, if yes then how.

      - sivani sahoo

        JournalDev
        DigitalOcean Employee
        DigitalOcean Employee badge
        July 29, 2019

        Thanks it will helpful for me

        - Balakrishna

          JournalDev
          DigitalOcean Employee
          DigitalOcean Employee badge
          March 22, 2019

          I’m trying to import your example. Usage Spring sts 3.9.6 Release. I am new to the environment and I would like to learn from your examples, but importing it as a maven project gives me a considerable number of errors. how can I do my mail is misonsan@libero.it I’m Italian and my name is Moreno

          - Moreno

            JournalDev
            DigitalOcean Employee
            DigitalOcean Employee badge
            November 30, 2018

            Hey buddy, Thank you so much for this code. You have saved my life. Last one week i was working on this ajax code but i didnt getting it.And finally i got it. Thanks again.

            - Kunal bhide

              JournalDev
              DigitalOcean Employee
              DigitalOcean Employee badge
              July 14, 2017

              Not working for me . You may be missed to write regarding web.xml

              - gyana

                JournalDev
                DigitalOcean Employee
                DigitalOcean Employee badge
                February 15, 2017

                Hello , This Example is working fine… Thanks…

                - shahjad

                  JournalDev
                  DigitalOcean Employee
                  DigitalOcean Employee badge
                  October 10, 2016

                  Dear Pankaj, Thank for this program. I am not getting the desired output …when i enter the name “Guest” …I am not getting “Hello Guest” as an Ajax response. Build successfully(clean and install all). Kindly reply. thank you. Regards,

                  - Sidharth

                    JournalDev
                    DigitalOcean Employee
                    DigitalOcean Employee badge
                    September 3, 2016

                    There is not servlet class file in the example.There is source file but not class file.That’s why so many people were unable to run it.Actually he has correctly not compiled the file as the java versions of people would differ and they would not be able to run it.So first compile the servlet file to class file and then place it in the classes forlder and it would work

                    - Ath J

                      Try DigitalOcean for free

                      Click below to sign up and get $200 of credit to try our products over 60 days!

                      Sign up

                      Join the Tech Talk
                      Success! Thank you! Please check your email for further details.

                      Please complete your information!

                      Get our biweekly newsletter

                      Sign up for Infrastructure as a Newsletter.

                      Hollie's Hub for Good

                      Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

                      Become a contributor

                      Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

                      Welcome to the developer cloud

                      DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

                      Learn more
                      DigitalOcean Cloud Control Panel