AJAX with Servlets using JQuery and JSON

DOWNLOAD In my previous post , I explained about making AJAX calls to a servlet from a JSP page and updating a part of the JSP page w...

49
AJAX, AJAX - JAVA, J2EE, Java, Jquery
A+ A-
Print Email
https://www.programming-free.com/2012/09/ajax-with-servlets-using-jquery-and-json.html

DOWNLOAD

In my previous post, I explained about making AJAX calls to a servlet from a JSP page and updating a part of the JSP page with the response from the Servlet. That was a very simple example I provided in that post by returning a piece of text from the servlet to JSP to start with, and now in this post I am going to add something more to it by making the servlet return complex Java Objects such as lists, maps, etc. To do this, let us get introduced to JSON(Javascript Object Notation), in addition to JQuery and AJAX. JSON is derived from Javascript for representing simple data structures and associative arrays, called objects. Here in our scenario, we are going to use a JSON library in Servlet to convert Java objects (lists,maps,arrays.etc) to JSON strings that will be parsed by JQuery in the JSP page and will be displayed on the web page.


There are many JSON libraries available that can be used to pass AJAX updates between the server and the client. I am going to use google's gson library in this example. 

Now, let us create a simple JSP page with two drop down lists, one that contains values for countries and the other that is going to be populated with values for states based on the value of country selected in the first drop down list. Whenever the value is selected in the "country" drop down list, the "states" drop down list will be populated with corresponding state values based on the country selected. This has to be done without a page refresh, by making AJAX calls to the servlet on the drop down list change event.

Here are the steps to reproduce in Eclipse,

1. First of all create a "Dynamic Web Project" in Eclipse.
2. Create a new JSP page under "Webcontent" folder and copy paste the below code in it.

<%@ 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>AJAX calls to Servlet using JQuery and JSON</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(document).ready(function() {
        $('#country').change(function(event) {  
        var $country=$("select#country").val();
           $.get('ActionServlet',{countryname:$country},function(responseJson) {   
            var $select = $('#states');                           
               $select.find('option').remove();                          
               $.each(responseJson, function(key, value) {               
                   $('<option>').val(key).text(value).appendTo($select);      
                    });
            });
        });
    });          
</script>
</head>
<body>
<h1>AJAX calls to Servlet using JQuery and JSON</h1>
Select Country:
<select id="country">
<option>Select Country</option>
<option value="India">India</option>
<option value="US">US</option>
</select>
<br/>
<br/>
Select State:
<select id="states">
<option>Select State</option>
</select>
</body>
</html>


3. Download google's GSON library from here and place it in your project's WEB-INF/lib folder.
4. Create a servlet in the name 'ActionServlet' (since I have used this name in the jquery code above') in the src directory. Copy and paste the below code in the doGet() method of the servlet and add the import statement in the header section of the servlet.

import com.google.gson.Gson;

protected void doGet(HttpServletRequest request,   HttpServletResponse response) throws ServletException, IOException {
 
  String country=request.getParameter("countryname");
  Map<String, String> ind = new LinkedHashMap<String, String>();
     ind.put("1", "New delhi");
     ind.put("2", "Tamil Nadu");
     ind.put("3", "Kerala");
     ind.put("4", "Andhra Pradesh");
     
     Map<String, String> us = new LinkedHashMap<String, String>();
     us.put("1", "Washington");
     us.put("2", "California");
     us.put("3", "Florida");
     us.put("4", "New York");
     String json = null ;
     if(country.equals("India")){
      json= new Gson().toJson(ind);   
     }
     else if(country.equals("US")){
      json=new Gson().toJson(us);  
     }
     response.setContentType("application/json");
     response.setCharacterEncoding("UTF-8");
     response.getWriter().write(json);       
 }

}

In the above code, we create two maps for two countries, and return the one based on the country parameter passed to the servlet in the AJAX call made by the JQuery's get() method. Here we convert the map objects to json strings in order to send the response back to the JSP page.

5. Make sure you have done servlet mapping properly in web.xml file. An example of this is given below,

<servlet>
    <servlet-name>ActionServlet</servlet-name>
    <servlet-class>ajaxdemo.ActionServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>ActionServlet</servlet-name>
    <url-pattern>/ActionServlet/*</url-pattern>
</servlet-mapping>


In the above code,'ajaxdemo' is the package name in which I have created the servlet. Replace it with your package structure to make the servlet work properly.

Thats it! You are now all set to run the project with Tomcat. When you run this project, the second drop down list will be populated automatically when you change the value in the first drop down list. 

Output Screenshots:

First drop down list changing,


On selecting 'India' in the first drop down list,


On selecting 'US' in the first drop down list,



Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. 



Subscribe to GET LATEST ARTICLES!


Posted by

Related

Jquery 7835410912476609284
Newer Post Older Post Home item

Post a Comment

  1. Subha Chandra18 September 2012 at 05:53

    good example

    ReplyDelete
  2. ameshlal17 October 2012 at 03:00

    Can we use ajax post here.. what are all the changes to be made for that?

    ReplyDelete
  3. Priya Darshini17 October 2012 at 11:18

    @ameshlal: Yes. We can use. But GET method is generally used for receiving data from the server and post for updating date in the server. In this scenario it is most appropriate to use GET method.

    However if you want to use POST method for reasons like security, you just need to replace $.get method with a $.post in the above example.

    Even more simple example that alerts out the response data,

    $.post("ActionServlet", { name: "John", time: "2pm" },
    function(data) {
    alert("Data Loaded: " + data);
    });

    ReplyDelete
    Replies
    1. Anonymous7 December 2012 at 08:30

      I tried your example. I can see the "responseJson" value in the index.jsp. But the values are not populated into states drop down box.

      Delete
    2. Priya Darshini7 December 2012 at 12:12

      This example works fine for me. If the values are not populated in the second drop down box, you will have to debug your jquery response script. Please find the working source code for the above example in the below link. Hope this will help you compare and debug your application.

      https://www.dropbox.com/sh/arhvjju8pflnv2n/o6PIHy85GH/JSONAjax/

      Delete
  4. Anonymous14 December 2012 at 11:19

    Its ok but i need ajax for more dropdown box ...How can i do it
    for ex cities in those states

    ReplyDelete
  5. Rahul Soni7 February 2013 at 05:14

    Hello Priya,that was a very nice example.I'm trying to build a JSON object containing data that I retrieve from database in my servlet.So,how can I build such JSON object containing multiple arrays that themselves contains multiple key-value pairs.........
    Plz help me out with this one...........

    ReplyDelete
    Replies
    1. Priya Darshini7 February 2013 at 10:16

      Hi,

      You have to create separate json object for each array of data you want to send from your servlet and then form a single json object that is an array of all the other json objects you created before. This single json object that contains an array of json objects has to be returned to the jsp. See Example below,

      Return Multiple JSON Objects from Servlets to JSP
      Server Side

      String json1 = new Gson().toJson(object1);
      String json2 = new Gson().toJson(object2);
      response.setContentType("application/json");
      String bothJson = "["+json1+","+json2+"]"; //Put both objects in an array of 2 elements
      response.getWriter().write(bothJson);

      Client side

      $.get("MyServlet", parameters, function (data){
      var data1=data[0], data2=data[1]; //We get both data1 and data2 from the array
      $("h3#name").text(data1["name"]);
      $("span#level").text(data1["level"]);
      $("span#college").text(data2["college"]);
      $("span#department").text(data2["department"]);
      });

      Delete
    2. Rahul Soni8 February 2013 at 00:24

      Hi Priya,
      I'm trying to input student record (name,city,college)for 3 students using a loop.I've used JSONObject to store each detail.Then I've added that JSONObject to a JSONArray then I've added that array obj to JSONObject.but its displaying the last set of values I enter for all 3 records....

      Code snippet:

      for(i=0;i<3;i++)
      {
      System.out.println("Enter name");
      name = input.readLine();
      System.out.println("Enter city");
      city = input.readLine();
      System.out.println("Enter college");
      college = input.readLine();

      detail.put("name",name);
      detail.put("city",city);
      detail.put("college",college);

      arr.put(i,detail);
      obj.put("student",arr);
      }

      String output = gson_obj.toJson(obj);
      System.out.println("Output: "+output);

      Input:{1,2,3} {4,5,6} {7,8,9}(Suppose)

      Output: {"myHashMap":{"student":{"myArrayList":[{"myHashMap":{"name":"7","college":"9","city":"8"}},{"myHashMap":{"name":"7","college":"9","city":"8"}},{"myHashMap":{"name":"7","college":"9","city":"8"}}]}}}

      Can u plz tell me where am I going wrong..I'm actually trying to build a JSON obj after retrieving data from database. of the form.........
      {students: [student{name,city,college},student{name,city,college},student{name,city,college}]}

      Delete
    3. Priya Darshini10 March 2013 at 07:35

      Hi,

      Check this out,

      AJAX Fetch Data from Database in JSP and Servlet with JSONArray

      Thanks,
      Priya

      Delete
  6. vedha Livi9 March 2013 at 03:17

    hai i got some problem ,,,,,
    i rerieve the values but how to display for the textbox ...
    pls help me

    ReplyDelete
  7. Sumit Jain9 March 2013 at 04:44

    Hi Priya,
    Thanks for this example. It is very helpful to me. Do you have same example with mysql database? Would you please upload it

    ReplyDelete
    Replies
    1. Priya Darshini10 March 2013 at 07:33

      Hi Sumit,

      Welcome! Check out my latest post,

      AJAX Fetch Data from Database in JSP and Servlet with JSONArray

      Hope this helps too!

      Thanks,
      Priya

      Delete
    2. Sumit Jain11 March 2013 at 04:44

      Hi Priya,

      Thanks a lot, your latest post AJAX Fetch Data from Database in JSP and Servlet with JSONArray helped me a lot.

      Thanks,
      Sumit

      Delete
    3. Priya Darshini11 March 2013 at 10:28

      Most Welcome!

      Delete
  8. navinnac11 March 2013 at 23:16

    hi thx priya, this article help me a lot....

    ReplyDelete
  9. Dhaval Shah26 April 2013 at 23:30

    Hi priya ,

    Nice examples,
    I have one question and I am not able to get solution on it
    Here we selecting one country say india and we are getting list of states in india
    now what should I do if I select both INDIA and US together then we should get all states of India and us within that drop down . How to do this.

    I am able to select multiple countries using (multiple="multiple" ) in JSP but not able to get states so how to do this ... Can you pleaase help me on this

    ReplyDelete
    Replies
    1. Priya Darshini27 April 2013 at 09:58

      Hi Dhaval,

      If you want to enable users to select multiple options, then you have to make ajax calls to servlet whenever an option is selected and deselected. Make sure servlet contains appropriate code to handle each option.

      Check this out for a simple example on how to handle multiple select option in jquery,

      http://api.jquery.com/change/

      Hope this helps!

      Thanks,
      Priya

      Delete
  10. Luca17 June 2013 at 14:29

    Hi Priya,
    maybe your code may be missing of a starting import like:
    import java.util.*;

    Otherwise LinkedHashMap is not recognized

    ReplyDelete
  11. me123chan30 August 2013 at 01:41

    Hi Priya, can you help me with my question that I post in stackoverflow
    http://stackoverflow.com/questions/18527323/ask-different-response-from-servlet-use-ajax-and-jsp

    I've got trouble on the servlet coz I can't access the different block "if-else condition". Can you help me?

    Thanks Priya.

    ReplyDelete
  12. Naveen Mamidala4 September 2013 at 23:08

    Hi priya,
    this one is good example, and i want to get JsonArray from server which contains no.of states, and after i want to populate into drop down box(into select tag), without iteration(like without using $each). is there any scenario, if there plz tell me how to do.

    Thank u.

    ReplyDelete
  13. Naveen Mamidala5 September 2013 at 06:55

    and one more thing it is working with Gson object, what about JSONObject,how to use JsonObect to send data to client

    ReplyDelete
  14. Mithun6 October 2013 at 08:56

    thanks a lot, it was high time i updated from using js based ajax calls to jQuery based ones...

    ReplyDelete
  15. Wagdi Alrawagfeh1 November 2013 at 12:41

    thank you for this helpful tutorials. I am trying to send two or more one dimensional arrays from servlet to a JSP, I tried
    json= new Gson().toJson("["+a1+","+a2+"]"); any help in this regard are highly appreciated

    ReplyDelete
  16. Keith Secker18 November 2013 at 03:17

    Well, I just posted about your other jQuery/AJAX example and how quick and easy it was to set up and understand, and then I find this one.

    Another simple easy to understand and working example of jQuery/AJAX/JSON...
    Although this took about 5 minutes to get working :-)

    Thank you again

    ReplyDelete
    Replies
    1. Priya Darshini18 November 2013 at 09:19

      Thank you so much for your comment. Keep yourself subscribed to ProgrammingFree via email or social networks for more such useful articles.

      Delete
  17. javier garcia20 November 2013 at 09:27

    Hi many thanks for the example has helped me a lot.

    I have a question, I have a arraylist in a class that brings me the names of the State but as I can not pass it to map the servlet

    example.

    servlet.

    this is how I bring the arraylist to servlet

           Consultations Consultations userLis = new ();
              In = userLis.Consultapais ArrayList ();
             
              Map Of String ind = new LinkedHashMap ();
                
      for (Country country: in) {
             ind.put (pais.getNombre (), country);
              
              }

    and run it in the combobox

    I above shows this.

    [object Object]

    I would greatly appreciate if you could help.

    Thank you. :rapt: :rapt:

    ReplyDelete
  18. Er. Pawan Sharma24 February 2014 at 02:55

    Thanks priya its a very useful tutorial. But i have an problem that i want to populate data from databse onBlur event of a text field. i tried it for select than its worked fine but when i tried with textfield then i faced a problem that how can we pass textfield value to servlet using json.
    plese help.

    ReplyDelete
  19. Md. Azizul Alam27 February 2014 at 02:48

    Can you post a similar tutorial where the drop down list is populated dynamically from servlets JSON. A three tier tutorial will be a great tutorial I think.

    Thanks

    ReplyDelete
  20. nityanandasahoo23 March 2014 at 00:24

    can u add one more dependent dropdown list like distict there

    ReplyDelete
  21. The Teacher28 March 2014 at 03:14

    I am having issues running this code that u gave in this post..
    I think there is an issue with GSON lib .. from the link that u gave i got 3 executable jar files and placed them WEB-INF/lib but when i run this code nothing happens :disappointed: ie when i click on US/INDIA ther is nothing in the states .. plz help

    ReplyDelete
  22. venkat8 May 2014 at 03:21

    Hi Priya,
    Thanks for jTable example. Helped me a lot....

    ReplyDelete
  23. Programmer28 June 2016 at 01:57

    Thanks for the example...
    If i need to pass the two dropdown boxes values when i press submit button. Then how can i get the value of second dropdownbox? there is no "value" attribute in second dropdown tag option

    ReplyDelete
  24. Pradee Kumar9 August 2016 at 02:13

    How to do this in struts2

    ReplyDelete
  25. Priyantha Samaraweera2 November 2016 at 03:07

    This comment has been removed by the author.

    ReplyDelete
  26. Tonio Banderas16 October 2017 at 10:15

    fuck you, idiot

    ReplyDelete
  27. Lore A. Ramirez27 February 2018 at 11:29

    I got this error Uncaught TypeError: $.get is not a function
    How can I solve this? I've tried importing the complete jquery lib and changing $ to jquery...it doesnt work..

    ReplyDelete
  28. Unknown11 September 2018 at 23:21

    please can you explain the jquery code populated statenames

    ReplyDelete
  29. dheeraj kumar19 September 2018 at 06:02

    bro just use jquery having ajax also.
    there is a cdn of jquery which supports ajax.

    ReplyDelete
  30. cynthia williams20 December 2018 at 03:22

    Informative post.
    R Programming Training in Chennai

    ReplyDelete
  31. jefrin adams29 January 2019 at 02:39

    Very good to read this post
    R programming training institute in chennai

    ReplyDelete
  32. VRITPROFESSIONALS21 February 2019 at 05:49

    Nice post. Thanks for sharing! I want people to know just how good this information is in your article. It’s interesting content and Great work.
    Thanks & Regards,
    VRIT Professionals,
    No.1 Leading Web Designing Training Institute In Chennai.

    ReplyDelete
  33. janu22 February 2019 at 21:23

    Really awesome blog. Your blog is really useful for me
    r programming training in chennai | r training in chennai
    r language training in chennai | r programming training institute in chennai
    Best r training in chennai

    ReplyDelete
  34. jenifer irene7 March 2019 at 21:13

    Very nice blog, Thank you for providing good information.
    Aviation Academy in Chennai
    Air hostess training in Chennai
    Airport management courses in Chennai
    Ground staff training in Chennai

    ReplyDelete
  35. Raji11 March 2019 at 03:25

    This is really impressive post, I am inspired with your post, do post more blogs like this, I am waiting for your blogs.
    R Training Institute in Chennai | R Programming Training in Chennai

    ReplyDelete
  36. Elevators and Lifts16 July 2019 at 00:37

    Wonderful post. Keep working and Share these types of blogs. Home elevators | hydraulic elevators

    ReplyDelete
  37. janathan14 October 2019 at 22:46

    very informative keepsharing
    freeinplanttrainingcourseforECEstudents
    internship
    internship-for-aeronautical-engineering-students-in-india
    internship-for-cse-3rd-year-students
    freeinplanttrainingcourseforMECHANICALstudents
    internship-in-chennai-for-ece
    inplant-training-for-civil
    internship-at-bsnl
    internship-for-2nd-year-ece-students
    internship-for-aeronautical-students-in-chennai

    ReplyDelete

emo-but-icon

SUBSCRIBE


Tabs

item