Spring MVC Ajax Tutorial

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.naveen.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.naveen.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.naveen.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 :

<html>

    <head>

       

        <script src="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: "/SpringMVCAjax/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="/SpringMVCAjax/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}.

spring-servlet.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.naveen" />

    <!-- 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>

 Run the application in eclipse and hit the url,You will get the following page.

Download Source Code

Click here to download source code 

Read More

Spring MVC Form Validation

Form Validation in spring MVC 3 Using Hibernate Validator(JSR 303)

Previous example shows how form handling is done in Spring MVC 3 using annotation. In this tutorial we will learn how Spring MVC uses Hibernate Bean Validator framework to apply form validation.

We will modify our previous example on Form Processing in Spring MVC 3 with Annotation to use Hibernate Bean Validator Framework (JSR 303 implementation).

Hibernate Bean Validator Framework uses annotations to apply validation rules on properties of a bean. To use Hibernate Bean Validator Framework with Spring MVC 3 we need to add some jar files related to bean validator and it’s dependencies. Following are the jar files we have to add :

• hibernate-validator-4.0.2.GA.jar
• log4j-1.2.16.jar
• slf4j-api-1.5.10.jar
• slf4j-log4j12-1.5.10.jar
• javax.validation-1.0.0.GA.jar

Following are some of the annotations of Hibernate Validator that can be used to validate bean properties :

1. @NotNull : Property can not be null. Applicable to class instances only, not to primitive types.
2. @NotEmpty : Property can not be null or empty.
3. @Null : Property should be null. Applicable to class instances only, not to primitive types.
4. @Length : Used to define min and max length of a string.
5. @NumberFormat : Can define a particular number format or style to String.
6. @Min : Used to apply constraint on minimum value of number.
7. @Max : Used to apply constraint on maximum value of number.
8. @Valid : Applicable to an class instance. Class should also use Hibernate Validator constraint and the instance will be valid if all constraint defined in class are fulfilled.
9. @AssertTrue : Applicable to boolean property only. The property must be true.
10. @AssertFalse : Checks that the annotated elements are false;
11. @CreditCardNumber : Used to check if a number is a credit card number or not.
12. @DecimalMax : Applicable to BigDecimal, BigInteger,String,  byte, short,  int, long and respective wrapper classes. For min value check.
13. @DecimalMin :  Applicable to BigDecimal, BigInteger,String,  byte, short,  int, long and respective wrapper classes. For max value check.
14. @Future : Applicable to Date or Calender instance. The time must be in future means after today.
15. @Past : Applicable to Date or Calender instance. The time must be in past means before today.

Now, lets start with example to implement the validation using hibernate bean validation in spring mvc 3. We will follow following steps to modify our previous example of form processing :

1. First of all we will modify our command class (User.java) to include hibernate bean validation annotations.
2. Then we will change our controller (RegistrationController.java) to include @Valid annotation.

User.java

Our command class User.java will be modified as follows to make the support of hibernate bean validation :

package com.naveen.domain;

import org.hibernate.validator.constraints.NotEmpty;

import org.hibernate.validator.constraints.Length;

import org.springframework.format.annotation.NumberFormat;

import org.springframework.format.annotation.NumberFormat.Style;

public class User {

            @NotEmpty(message="Name field is mandatory.")

            private String name = null;

           

            @NotEmpty(message="Standard field is mandatory.")

            private  String standard = null;

            private int age;

            private String sex = null;

           

             @Length(max=10,min=10,message="Phone number is not valid. Should be of length 10.")

             @NotEmpty(message="Phone field is mendatory.") @NumberFormat(style= Style.NUMBER)

            private String phone=null;

             

            public String getPhone() {

                        return phone;

            }

            public void setPhone(String phone) {

                        this.phone = phone;

            }

            public String getName() {

                        return name;

            }

            public void setName(String name) {

                        this.name = name;

            }

            public String getStandard() {

                        return standard;

            }

            public void setStandard(String standard) {

                        this.standard = standard;

            }

            public int getAge() {

                        return age;

            }

            public void setAge(int age) {

                        this.age = age;

            }

            public String getSex() {

                        return sex;

            }

            public void setSex(String sex) {

                        this.sex = sex;

            }

           

            @Override

            public String toString() {

                        return "User [name=" + name + ", standard=" + standard + ", age=" + age

                                                + ", sex=" + sex + "]";

            }

}

You can apply our custom error message using “message” attributes in annotations. Other attributes are required as per the annotations.

RegistrationController.java

We have to change our controller class to work with annotation configurations.

package com.naveen.controllers;

import javax.validation.Valid;

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 com.naveen.domain.User;

@Controller

@RequestMapping(value="/registration.htm")

public class RegistrationController {

           

            @RequestMapping(method=RequestMethod.GET)

            public String showForm(ModelMap model){

                        User user = new User();

                        model.addAttribute("USER", user);

                        return "registration";

            }

            @RequestMapping(method=RequestMethod.POST)

            public String processForm(@Valid @ModelAttribute(value="USER") User user,BindingResult result){

                        if(result.hasErrors()){

                                   

                                    return "registration";

                        }else{

                                    System.out.println("User values is : " + user);

                                    return "success";

                        }                      

            }

}

You can find a new thing in our controller class. Here is the explanation :

• @Valid : the new annotation @Valid has been associated with the ModelAttribute or command instance. It is the part of the Hibernate Bean Validation. It will indicate to Spring MVC that the User instance should be a valid instance according to Hibernate Bean Validation Framework and if any error are there then put the errors in BindingResult instance.

Spring Configuration File

 spring-servlet.xml and web.xml in WEB-INF folder will remain same as of previous example.

Registration.jsp

<%@ page session="true" %>

<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<html xmlns="http://www.w3.org/1999/xhtml">

            <head>

                        <title>Hello World with Spring 3 MVC</title>

                        <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

            </head>

            <body>

                        <h1>Registration Form</h1><br />

                        <form:form commandName="USER">

                        <table>

                                    <tr><td colspan="2"><form:errors path="*" cssStyle="color : red;"/></td></tr>

                                    <tr><td>Name : </td><td><form:input path="name" /></td></tr>

                                    <tr><td>Standard : </td><td><form:input path="standard" /></td></tr>

                                    <tr><td>Age : </td><td><form:input path="age" /></td></tr>

                                    <tr><td>Phone : </td><td><form:input path="phone" /></td></tr>

                                    <tr><td>Sex : </td><td><form:select path="sex">

                                                            <form:option value="Male"/>

                                                            <form:option value="Female"/>

                                    </form:select></td></tr>

                                    <tr><td colspan="2"><input type="submit" value="Save Changes" /></td></tr>

                        </table>

                        </form:form>

            </body>

</html>

Download Source Code

Click here to download source code

Read More