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 :

package com.raistudies.domain;

public class User {

    private String name = null;
    private String education = null;
    // Getter and Setter are omitted for making the code short
}

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 :

package com.raistudies.controllers;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.raistudies.domain.User;

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

    @RequestMapping(value="/AddUser.htm",method=RequestMethod.GET)
    public String showForm(){
        return "AddUser";
    }

    @RequestMapping(value="/AddUser.htm",method=RequestMethod.POST)
    public @ResponseBody String addUser(@ModelAttribute(value="user") User user, BindingResult result ){
        String returnText;
        if(!result.hasErrors()){
            userList.add(user);
            returnText = "User has been added to the list. Total number of users are " + userList.size();
        }else{
            returnText = "Sorry, an error has occur. User has not been added to list.";
        }
        return returnText;
    }

    @RequestMapping(value="/ShowUsers.htm")
    public String showUsers(ModelMap model){
        model.addAttribute("Users", userList);
        return "ShowUsers";
    }
}

“addUsers” is same as the controller method that handle form expect that it also contain annotation @ResponseBody, which tells Spring 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.jsp
AddUser.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 :

<%@ 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>Add Users using ajax</title>
        <script src="/AjaxWithSpringMVC2Annotations/js/jquery.js"></script>
        <script type="text/javascript">
        function doAjaxPost() {
        // get the form values
        var name = $('#name').val();
        var education = $('#education').val();

        $.ajax({
        type: "POST",
        url: "/AjaxWithSpringMVC2Annotations/AddUser.htm",
        data: "name=" + name + "&education=" + education,
        success: function(response){
        // we have the response
        $('#info').html(response);
        $('#name').val('');
        $('#education').val('');
        },
        error: function(e){
        alert('Error: ' + e);
        }
        });
        }
        </script>
    </head>
    <body>
        <h1>Add Users using Ajax ........</h1>
        <table>
            <tr><td>Enter your name : </td><td> <input type="text" id="name"><br/></td></tr>
            <tr><td>Education : </td><td> <input type="text" id="education"><br/></td></tr>
            <tr><td colspan="2"><input type="button" value="Add Users" onclick="doAjaxPost()"><br/></td></tr>
            <tr><td colspan="2"><div id="info" style="color: green;"></div></td></tr>
        </table>
        <a href="/AjaxWithSpringMVC2Annotations/ShowUsers.htm">Show All Users</a>
    </body>
</html>

You may be little bit confused if you are not aware of JQuery. Here is the explanation of the JQuery code :

  1. var name = $(‘#name’).val(); : – here the $ is JQuery selector that uses to select any node in HTML whose identifier is passed as argument. If the identifier is a prefix with # that means it is a id of the HTML node. Here, $(‘#name’).val() contains the value of the HTML node whose is “name’. The text box in which user will enter her/his name is with is as name. so java script variable name will contain the name of the user.
  2. $.ajax() :- It is the method in $ variable of JQuery to call Ajax. It has five arguments here. First of all “type” which indicated the request type of Ajax. It can be POST or GET. Then, “url” which indicates the url to be hit of Ajax submission. “data” will contain the raw data to be sent to the server. “success” will contain the function code that has to be call if the request get success and server sends an response to the browser. “error” will contain the function code that has to be call if the request get any error.
  3. $(‘#info’).html(response); :- will set the response of the server in to the div. In this way “Hello” + name will be shown in the div whose id is “info“.

ShowUsers.jsp
Following are the code in ShowUsers.jsp to print all student information from a ArrayList to jsp page :

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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>Users Added using Ajax</title>
    </head>
    <body style="color: green;">
    The following are the users added in the list :<br>
        <ul>
            <c:forEach items="${Users}" var="user">
                <li>Name : <c:out value="${user.name}" />; Education : <c:out value="${user.education}"/>
            </c:forEach>
        </ul>
    </body>
</html>

Here, we have used JSTL core taglib to iterate through the ArrayList and show every value in browser.

  • <c:forEach items=”${Users}” var=”user”> : tag is used for iterate through the ArrayList. Property “items” is used to define the bean on which the List object has been stored, so items=”${Users}” says that the users list is present in “Users” bean. “var” attribute says the name of the variable in which each user will be stored.
  • <c:out value=”${user.name}” /> : As, a single user will be stored in variable name “user” so to print the name property in User object we use ${user.name}.

app-config.xml

Our Spring MVC configuration file should be able to handle annotation driven controllers. The configuration are as follows :

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
http://www.springframework.org/schema/beans    http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

    <!-- Scans the classpath of this application for @Components to deploy as beans -->
    <context:component-scan base-package="com.raistudies" />

    <!-- Configures the @Controller programming model -->
    <mvc:annotation-driven />

    <!-- Resolves view names to protected .jsp resources within the /WEB-INF/views directory -->
    <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

</beans>

Deploy the war file to tomcat 6 and hit the url in browser, you will get following page displayed :

Ajax Form Using Spring MVC 3

Fill student information :

Ajax Filled Form Using Spring MVC 3

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

Ajax Form Submission Confirmation Spring MVC 3

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

Show All Users Spring MVC 3

That is all from Ajax using Spring MVC 3 and JQuery. You can download source from bellow link.
Source : Download

Reference: Ajax with Spring MVC 3 using Annotations and JQuery from our JCG partner Rahul Mondal at the Rai Studies blog.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.

6 Responses to "Ajax with Spring MVC 3 using Annotations and JQuery"

  1. Marc Schipperheyn says:

    I would recommend always returning

    public atResponseBoy  Map
    

    (The form replaces the  at symbol automatically through some Twitter parser)so that you have more flexibility in the result and define some standard keys in this response for Forms that you can code against in the frontend, such as an errors key, which will contain the binding result errors.

    and have some kind of general error handler that you but in a BaseController class that you extend. This will prevent stacktraces from showing up in your json messages.

    atExceptionHandler(Exception.class)	
    public atResponseBody	Map handleException(Exception e, HttpServletRequest request, HttpServletResponse response) {	
    	response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);		
    Map errors = new HashMap();
    		errors.put("errors",new Object[]{new ObjectError("object",messages.getMessage("error.servererror.500",null, RequestUtils.getLocale(request)))});
    		return errors;	
    }
    

    Also, you will have to define handler mappings in such a way as to prevent a cache header from being generated for those json requests that shouldn’t be cached.

    JQuery is excellent but personally, I prefer YUI. 

    BTW this is java “code” geeks, right. What kind of of response form is this?!

  2. Kalyan Dasika says:

    There should also be an emphasis on a sound domain model. Do you really want a User class to hold Student information? A student can be a user, but not all users are students.. 

  3. hasini says:

    it is not working in IE8..

  4. Binh Thanh Nguyen says:

    Thanks, nice tips

  5. Parth says:

    Nice tutorial

  6. ray jhon says:

    Plz tell me what’s wrong in this code:——–

    —————–
    IN JSP PAGE:—-trying to passsing req to code…

    $(“#id_complaint”).change(function(){
    var v_ttType = $(“#id_complaint”).val();
    alert(v_ttType);
    $.getJSON(“./attributeListcreateTT.*”,{TTType:v_ttType,ajax:’true’}, function(resp)
    {
    alert(‘in json’);
    for(var i=0;i<resp.length;i++)
    {
    alert(resp[i].ATTRIBUTE);
    alert(resp[i].OUTCOME);
    }

    });

    });
    });

    /———-in java
    public String attributeList()
    {
    //templist2=(ArrayList)CnmRefData.getTTAttributes(prod, ttType);

    //return templist2;

    System.out.println("in attributeList………………RequestCAme….");
    try{

    JSONObject object = null;
    JSONArray array = null;
    List jsonAttrList = new ArrayList();
    String ttType = httpServletRequest.getParameter(“TTType”);

    System.out.println(“In *>>> ::”+ttType);

    templist2=(ArrayList)CnmRefData.getTTAttributes(“RON”, ttType);

    System.out.println(“::::”+templist2.size());
    Iterator itr = templist2.iterator();
    while(itr.hasNext()){
    CNMTTAttribute objCNMTTAttribute = (CNMTTAttribute)itr.next();
    object = new JSONObject();
    object.put(“ATTRIBUTE”, objCNMTTAttribute.getAttribute());
    object.put(“OUTCOME”,objCNMTTAttribute.getValidateOutcome());
    jsonAttrList.add(object);
    }
    array = JSONArray.fromObject(jsonAttrList);

    response.setHeader(“Cache-Control”,”no-cache”);
    response.getWriter().write(array.toString());

    }catch(NullPointerException e){
    addActionError(e.getMessage());
    e.printStackTrace();
    }catch(RuntimeException e){
    addActionError(e.getMessage());
    e.printStackTrace();
    }catch(OutOfMemoryError e){
    addActionError(e.getMessage());
    e.printStackTrace();
    }catch(Exception e){
    addActionError(e.getMessage());
    e.printStackTrace();
    }
    return null;

    }

    plz tell me what’s wrong in this… stuck here…

Leave a Reply


× 1 = four



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close