Spring Mvc Ajax Json | Jquery Ajax

Spring Components

Only the important classes will be displayed.

4.1

@RestController

to handle the Ajax request. Read the comments for self-explanatory.


package com.mkyong.web.controller; import java.util.ArrayList; import java.util.List; import javax.annotation.PostConstruct; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import com.fasterxml.jackson.annotation.JsonView; import com.mkyong.web.jsonview.Views; import com.mkyong.web.model.AjaxResponseBody; import com.mkyong.web.model.SearchCriteria; import com.mkyong.web.model.User; @RestController public class AjaxController { List

users; // @ResponseBody, not necessary, since class is annotated with @RestController // @RequestBody - Convert the json data into object (SearchCriteria) mapped by field name. // @JsonView(Views.Public.class) - Optional, filters json data to display. @JsonView(Views.Public.class) @RequestMapping(value = "/search/api/getSearchResult") public AjaxResponseBody getSearchResultViaAjax(@RequestBody SearchCriteria search) { AjaxResponseBody result = new AjaxResponseBody(); if (isValidSearchCriteria(search)) { List

users = findByUserNameOrEmail(search.getUsername(), search.getEmail()); if (users.size() > 0) { result.setCode("200"); result.setMsg(""); result.setResult(users); } else { result.setCode("204"); result.setMsg("No user!"); } } else { result.setCode("400"); result.setMsg("Search criteria is empty!"); } //AjaxResponseBody will be converted into json format and send back to the request. return result; } private boolean isValidSearchCriteria(SearchCriteria search) { boolean valid = true; if (search == null) { valid = false; } if ((StringUtils.isEmpty(search.getUsername())) && (StringUtils.isEmpty(search.getEmail()))) { valid = false; } return valid; } // Init some users for testing @PostConstruct private void iniDataForTesting() { users = new ArrayList

(); User user1 = new User("mkyong", "pass123", "[email protected]", "012-1234567", "address 123"); User user2 = new User("yflow", "pass456", "[email protected]", "016-7654321", "address 456"); User user3 = new User("laplap", "pass789", "[email protected]", "012-111111", "address 789"); users.add(user1); users.add(user2); users.add(user3); } // Simulate the search function private List

findByUserNameOrEmail(String username, String email) { List

result = new ArrayList

(); for (User user : users) { if ((!StringUtils.isEmpty(username)) && (!StringUtils.isEmpty(email))) { if (username.equals(user.getUsername()) && email.equals(user.getEmail())) { result.add(user); continue; } else { continue; } } if (!StringUtils.isEmpty(username)) { if (username.equals(user.getUsername())) { result.add(user); continue; } } if (!StringUtils.isEmpty(email)) { if (email.equals(user.getEmail())) { result.add(user); continue; } } } return result; } }








4.2 The “json data” will be converted into this object, via

@RequestBody

.


package com.mkyong.web.model; public class SearchCriteria { String username; String email; //getters and setters }


4.2 Create a dummy class for

@JsonView

, to control what should be returned back to the request.


package com.mkyong.web.jsonview; public class Views { public static class Public {} }


4.3 User object for search function. Fields which annotated with

@JsonView

will be displayed.


package com.mkyong.web.model; import com.fasterxml.jackson.annotation.JsonView; import com.mkyong.web.jsonview.Views; public class User { @JsonView(Views.Public.class) String username; String password; @JsonView(Views.Public.class) String email; @JsonView(Views.Public.class) String phone; String address; //getters, setters and contructors }


4.4 This object will be converted into json format and return back to the request.


package com.mkyong.web.model; import java.util.List; import com.fasterxml.jackson.annotation.JsonView; import com.mkyong.web.jsonview.Views; public class AjaxResponseBody { @JsonView(Views.Public.class) String msg; @JsonView(Views.Public.class) String code; @JsonView(Views.Public.class) List

result; //getters and setters }



The


@JsonViewbelongs to Jackson library, not Spring framework.


jQuery Ajax

In JSP, create a simple search form and send the form request with jQuery

$.ajax

.


<%@page session="false"%> <%@taglib prefix="spring" uri="http://www.springframework.org/tags"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


Search Form

Username

Email

Search





Example of Spring MVC Ajax JSON Response

In this section, we will go through an example of a Spring MVC Ajax JSON response. We will cover the environment setup, coding the application, and running and testing the application.

Setting Up the Environment

To set up the environment for this example, we need to have the following software installed:

• Java Development Kit (JDK)
• Eclipse IDE
• Apache Tomcat Server
• jQuery library

Once we have installed these software, we can proceed to the next step.

Coding the Application

In this step, we will create a simple Spring MVC application that will handle an Ajax request and return a JSON response.

1. Create a new Spring MVC project in Eclipse IDE.
2. In the
   
web.xml

   file, add the following configuration:




dispatcher


org.springframework.web.servlet.DispatcherServlet

contextConfigLocation /WEB-INF/dispatcher-servlet.xml



dispatcher




1. Create a
   
dispatcher-servlet.xml

   file in the
   
WEB-INF

   directory and add the following configuration:

1. Create a new controller class named
   
AjaxController

   in the
   
com.example.controller

   package and add the following code:


@Controller public class AjaxController { @RequestMapping(value = "/ajax", method = RequestMethod.POST) public @ResponseBody Map

handleAjaxRequest() { Map

response = new HashMap

(); response.put("name", "John Doe"); response.put("age", 30); return response; } }





1. Create a new JSP file named
   
index.jsp

   in the
   
WEB-INF/views

   directory and add the following code:




Spring MVC Ajax JSON Response Example

Name:

Age:





Running and Testing the Application

To run and test the application, follow these steps:

1. Deploy the application on the Apache Tomcat server.
2. Open a web browser and navigate to
   
http://localhost:8080/spring-mvc-ajax-json-example/

   .
3. The page should display the name and age retrieved from the Ajax request.

That’s it! You have successfully created a Spring MVC Ajax JSON response example.

Project Dependencies


4.0.0


com.mkyong


spring4-mvc-maven-ajax-example
war
1.0-SNAPSHOT


spring4 mvc maven ajax example

1.8


4.2.2.RELEASE


2.6.3


1.1.3


1.7.12


1.2


3.1.0



org.springframework


spring-webmvc


${spring.version}




commons-logging


commons-logging







com.fasterxml.jackson.core


jackson-core


${jackson.version}




com.fasterxml.jackson.core


jackson-databind


${jackson.version}





javax.servlet


jstl


${jstl.version}





org.slf4j


jcl-over-slf4j


${jcl.slf4j.version}




ch.qos.logback


logback-classic


${logback.version}






javax.servlet


javax.servlet-api


${servletapi.version}


provided




org.apache.maven.plugins


maven-compiler-plugin


3.3


${jdk.version}

${jdk.version}


org.eclipse.jetty


jetty-maven-plugin


9.2.11.v20150529



10



/spring4ajax



org.apache.maven.plugins


maven-eclipse-plugin


2.10



true


true


2.0


spring4ajax


org.apache.maven.plugins


maven-war-plugin


2.6



false


org.wildfly.plugins


wildfly-maven-plugin


1.1.0.Alpha5



127.0.0.1
9990
admin
admin
spring4ajax.war



Ajax JSON Response in Spring MVC

Spring MVC provides an easy way to handle Ajax requests and send JSON responses. In this section, we will discuss how to configure Ajax in Spring MVC and create JSON responses.

Configuring Ajax in Spring MVC

To handle Ajax requests in Spring MVC, we need to configure the

DispatcherServlet

to enable handling of annotated controllers. We can do this by adding the following configuration in the

web.xml

file:




dispatcher


org.springframework.web.servlet.DispatcherServlet

contextConfigLocation /WEB-INF/spring/dispatcher-servlet.xml



dispatcher




Next, we need to create a Spring controller to handle the Ajax request. We can annotate the controller method with

@RequestMapping

and

@ResponseBody

to indicate that the method should handle Ajax requests and return a JSON response.

Creating JSON Response

To create a JSON response in Spring MVC, we can use the

@ResponseBody

annotation. This annotation indicates that the method should return the response body directly to the client instead of rendering a view.

We can create a JSON response by returning a Java object that can be serialized to JSON. Spring MVC will automatically serialize the object to JSON and send it as the response body.

Here’s an example of a Spring controller method that returns a JSON response:


@RequestMapping(value = "/getPerson", method = RequestMethod.GET) @ResponseBody public Person getPerson() { Person person = new Person(); person.setName("John"); person.setAge(30); return person; }


In this example, we create a

Person

object and set its name and age. We then return the

Person

object, which Spring MVC will automatically serialize to JSON and send as the response body.

In conclusion, Spring MVC provides an easy way to handle Ajax requests and send JSON responses. By configuring the

DispatcherServlet

and using the

@ResponseBody

annotation, we can create controllers that handle Ajax requests and return JSON responses.

Get ahead

VMware offers training and certification to turbo-charge your progress.

Learn more

In my last entry, I walked you through several enhancements in Spring 3 for web application development. A number of you expressed interest in a follow-up entry focused on Ajax remoting. Spring 3 provides a lot in this area to take advantage of. Read on, and I’ll walk you through it.

For the purposes of this article, when I say Ajax, I’m talking about the web browser’s ability to communicate with a web server asynchronously using JavaScript. On the server-side, Spring provides the programming model for defining web services, including services consumed by JavaScript clients. On the client-side, nobody rolls their own Ajax framework these days, either. Most use an established JavaScript framework such as jQuery or Dojo.

Until version 3, Spring did not ship support for Ajax remoting. That didn’t stop our users from extending Spring to get it, or integrating other options themselves. Some used DWR, especially in the period before the rise of the JavaScript frameworks. More recently, REST-style remoting with JSON as the data exchange format has become more popular, especially because jQuery and co. make it so easy to do.

Now that Spring 3 is out, official support for Ajax remoting with JSON is provided as part of Spring MVC. This includes support for generating JSON responses and binding JSON requests using the Spring MVC @Controller programming model. In this article, I’m going to focus on using this support to implement several Ajax use cases. Like my last post, I’ll do this by walking you through a sample application you can experiment with yourself.

mvc-ajax has been designed to illustrate Spring MVC’s JSON support. The project is available in our spring-samples Subversion repository, is buildable with Maven, and is importable into STS / Eclipse. mvc-ajax has the same structure as the mvc-basic project presented in my previous entry. In fact, the Spring configuration is identical between the two.

Start your review by deploying the project to your servlet container and accessing the welcome page at localhost:8080/mvc-ajax. Since I use STS, I did this by first importing the project into the IDE, then deploying it to the built-in Tomcat / tc-server instance.

From the welcome page, activate the “Ajax @Controller Example” link. You will see a form to create a new Account. When you tab out of the Name field, your browser will ask the server if the name you just entered is available. If it is not, an error message will be displayed and the form will remain disabled until you enter a name that is available. The client-side JavaScript handling this resides in /WEB-INF/views/account/createForm.jsp and looks like:


$(document).ready(function() { // check name availability on focus lost $('#name').blur(function() { checkAvailability(); }); }); function checkAvailability() { $.getJSON("account/availability", { name: $('#name').val() }, function(availability) { if (availability.available) { fieldValidated("name", { valid : true }); } else { fieldValidated("name", { valid : false, message : $('#name').val() + " is not available, try " + availability.suggestions }); } }); }


Nothing Spring-specific here, just standard jQuery JavaScript.

On the server-side, the Controller for the account/availability resource is standard Java with some Spring MVC annotations:


@RequestMapping(value="/availability", method=RequestMethod.GET) public @ResponseBody AvailabilityStatus getAvailability(@RequestParam String name) { for (Account a : accounts.values()) { if (a.getName().equals(name)) { return AvailabilityStatus.notAvailable(name); } } return AvailabilityStatus.available(); }


AvailabilityStatus is a plain Java Value Object with two properties: an availability flag that tells the client if the user name is available, and an array of alternatives to suggest if the name you want is not available. The @ResponseBody annotation instructs Spring MVC to serialize the AvailabilityStatus to the client. Spring MVC automatically serializes to JSON because the client accepts that content type.

Underneath the covers, Spring MVC delegates to a HttpMessageConverter to perform the serialization. In this case, Spring MVC invokes a MappingJacksonHttpMessageConverter built on the Jackson JSON processor. This implementation is enabled automatically when you use the mvc:annotation-driven configuration element with Jackson present in your classpath.

Pretty cool, huh? Try creating an Account, then creating another one with the same name. You should see an error message suggesting alternate names. Turn on Firefox’s Firebug or Safari’s Web Inspector to debug the asynchronous interaction.

Spring MVC also provides support for sending JSON to the server. I have found the need for this to be less common, simply because posting form parameters is often sufficient. Nevertheless, JSON provides a flexible data-interchange format that richer JavaScript clients can conveniently work with. The ability to map JSON to a server-side Java Object for processing can be a useful feature in those cases.

In the sample, a JavaScript event handler intercepts the form submit event and posts the form data as JSON. The server returns the id of the newly created Account, which is then used to display a modal confirmation dialog:


$("#account").submit(function() { var account = $(this).serializeObject(); $.postJSON("account", account, function(data) { $("#assignedId").val(data.id); showPopup(); }); return false; });


On the server-side, the Controller is more standard Java with Spring MVC annotations:


@RequestMapping(method=RequestMethod.POST) public @ResponseBody Map

create(@RequestBody Account account, HttpServletResponse response) { Set

> failures = validator.validate(account); if (!failures.isEmpty()) { response.setStatus(HttpServletResponse.SC_BAD_REQUEST); return validationMessages(failures); } else { accounts.put(account.assignId(), account); return Collections.singletonMap("id", account.getId()); } }




Here, the @RequestBody annotation instructs Spring MVC to map the body of the HTTP request to an Account object. Spring MVC knows to map from JSON because the client set the request Content Type to application/json.

The create method also validates the Account object. If there are validation errors, a HTTP 400 is returned with the error messages, otherwise a HTTP 200 is returned with the assigned account ID.

Spring 3 provides first-class Ajax support with JSON as part of the Spring MVC module. This includes support for generating JSON responses and binding JSON requests using the Spring MVC @Controller programming model in conjunction with the Jackson JSON processor. In this article, I showed you how this support works. I hope you found this post useful, and look forward to hearing more of your experiences putting Spring 3 to work in your own applications!