Ajax with Spring MVC 3 using Annotations and JQuery

Its always been fun for me to work with Ajax! Is not it ? I will make it easy for you to use Ajax with Spring MVC 3 and JQuery. This post will illustrate you how to use Ajax in real life practices of industrial coding. As usual, we will take an practical example of Ajax in Spring MVC 3 framework and will implement it and I will make the implementation easy by make you understand the topic.

Let us see what is our example’s requirement and how Spring MVC 3 Ajax facility will fulfill it :
In our example, we will make a list of students with name and highest education level, to send the list to the placement office so that the students can get chance. We will make the “Add Student Form” available to the student online so that they can submit their name online and get registered. As a lot of students will use the system, so the performance of the system may very much low. To increase to performance of the web application we will use Ajax with Spring MVC 3 Framework and JQuery.
Following steps we have to go through to implement our example :

1.    First of all, we will create a domain class (User.java) that will hold the value of student information.

2.    After that we will create our controller class (UserListController.java) to handle HTTP request. Our controller will handle three types of requests. First, to show the “Add Student Form”, second to handle Ajax request came from “Add Student Form” and add the students to a list, third to show the student information as a list.

3.    Then, we will create jsp page (AddUser.jsp) to show “Add Student Form” that will use JQuery to send Ajax request to the Spring MVC Controller. The jsp will also confirm to the user that Student has been added to the list.

4.    Then, we will create a jsp (ShowUsers.jsp) that will list all users in the list.

User.java
User.java has two properties name and education to store the student information. Following is the code of User.java :

1	package com.raistudies.domain;
2

3	public class User {
4

5	private String name = null;
6	private String education = null;

7	// Getter and Setter are omitted for making the code short
8	}

UserListController.java
Controllers has three method to handle three request urls. “showForm” method handle the request for showing the form to the user. Bellow code shows the UserListController.java :

01	package com.raistudies.controllers;

03	import java.util.ArrayList;
04	import java.util.List;

05
06	import org.springframework.stereotype.Controller;

07	import org.springframework.ui.ModelMap;
08	import org.springframework.validation.BindingResult;

09	import org.springframework.web.bind.annotation.ModelAttribute;
10	import org.springframework.web.bind.annotation.RequestMapping;

11	import org.springframework.web.bind.annotation.RequestMethod;
12	import org.springframework.web.bind.annotation.ResponseBody;

13
14	import com.raistudies.domain.User;

15
16	@Controller

17	public class UserListController {
18	private List<User> userList = new ArrayList<User>();

19
20	@RequestMapping(value="/AddUser.htm",method=RequestMethod.GET)

21	public String showForm(){
22	return "AddUser";

23	}
24

25	@RequestMapping(value="/AddUser.htm",method=RequestMethod.POST)
26	public @ResponseBody String addUser(@ModelAttribute(value="user") User user, BindingResult result ){

27	String returnText;
28	if(!result.hasErrors()){

29	userList.add(user);
30	returnText = "User has been added to the list. Total number of users are " + userList.size();

31	}else{
32	returnText = "Sorry, an error has occur. User has not been added to list.";

33	}
34	return returnText;

35	}
36

37	@RequestMapping(value="/ShowUsers.htm")
38	public String showUsers(ModelMap model){

39	model.addAttribute("Users", userList);
40	return "ShowUsers";

41	}
42	}

“addUsers” is same as the controller method that handle form expect that it also contain annotation @ResponseBody, which tellsSpring MVC that the String returned by the method is the response to the request, it does not have to find view for this string. So the retuning String will be send back to the browser as response and hence the Ajax request will work. “showUsers” method is used to show the list of the students to the user.

AddUser.jspAddUser.jsp contain a simple form to collect information about the student and uses JQerey JavaScript framework to generate Ajax request to the server. Following is the code in AddUser.jsp :

Fill student information :

After that click on “Add Users” button, you will get message that user has been added to the list :

To show all student added to the list click on the button “Show All Users”, you will get following page :

hat is all from Ajax using Spring MVC 3 and JQuery.