├── .gitignore
├── README.md
├── build.gradle
└── src
    └── main
        ├── java
            └── com
            │   └── codetutr
            │       ├── controller
            │           └── PersonController.java
            │       ├── domain
            │           └── Person.java
            │       ├── service
            │           ├── PersonService.java
            │           └── PersonServiceImpl.java
            │       └── springconfig
            │           └── WebConfig.java
        └── webapp
            └── WEB-INF
                ├── view
                    ├── formPage.jsp
                    └── home.jsp
                └── web.xml


/.gitignore:
--------------------------------------------------------------------------------
 1 | *.class
 2 | *.jar
 3 | *.war
 4 | *.ear
 5 | 
 6 | .DS_Store
 7 | 
 8 | bin
 9 | build
10 | 
11 | .settings
12 | .gradle
13 | 
14 | .classpath
15 | 
16 | .project
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | spring-mvc-ajax
2 | ========================
3 | 
4 | Sample Spring MVC Application demonstrating JSON AJAX requests with jQuery front-end and Spring MVC back-end.
5 | 
6 | This code is a companion to a tutorial, _Easy REST-Based JSON Services with @ResponseBody_, that used to live on my Java/Spring tutorials site, codetutr.com.
7 | 


--------------------------------------------------------------------------------
/build.gradle:
--------------------------------------------------------------------------------
 1 | apply plugin: 'war'
 2 | apply plugin: 'jetty'
 3 | apply plugin: 'eclipse-wtp'
 4 | 
 5 | repositories {
 6 |    mavenCentral()
 7 | }
 8 | 
 9 | dependencies {
10 |    providedCompile 'javax.servlet:servlet-api:2.5'
11 |    compile 'org.springframework:spring-webmvc:3.2.2.RELEASE'
12 |    compile 'org.codehaus.jackson:jackson-mapper-asl:1.9.12'
13 |    runtime 'javax.servlet:jstl:1.2'
14 | }
15 | 
16 | 
17 | jettyRunWar.contextPath = '' //otherwise defaults to name of project


--------------------------------------------------------------------------------
/src/main/java/com/codetutr/controller/PersonController.java:
--------------------------------------------------------------------------------
 1 | package com.codetutr.controller;
 2 | 
 3 | import org.springframework.beans.factory.annotation.Autowired;
 4 | import org.springframework.stereotype.Controller;
 5 | import org.springframework.web.bind.annotation.PathVariable;
 6 | import org.springframework.web.bind.annotation.RequestMapping;
 7 | import org.springframework.web.bind.annotation.RequestMethod;
 8 | import org.springframework.web.bind.annotation.RequestParam;
 9 | import org.springframework.web.bind.annotation.ResponseBody;
10 | 
11 | import com.codetutr.domain.Person;
12 | import com.codetutr.service.PersonService;
13 | 
14 | @Controller
15 | @RequestMapping("api")
16 | public class PersonController {
17 | 	
18 | 	PersonService personService;
19 | 	
20 | 	@Autowired
21 | 	public PersonController(PersonService personService) {
22 | 		this.personService = personService;
23 | 	}
24 | 
25 | 	@RequestMapping("person/random")
26 | 	@ResponseBody
27 | 	public Person randomPerson() {
28 | 		return personService.getRandom();
29 | 	}
30 | 	
31 | 	@RequestMapping("person/{id}")
32 | 	@ResponseBody
33 | 	public Person getById(@PathVariable Long id) {
34 | 		return personService.getById(id);
35 | 	}
36 | 	
37 | 	/* same as above method, but is mapped to
38 | 	 * /api/person?id= rather than /api/person/{id}
39 | 	 */
40 | 	@RequestMapping(value="person", params="id")
41 | 	@ResponseBody
42 | 	public Person getByIdFromParam(@RequestParam("id") Long id) {
43 | 		return personService.getById(id);
44 | 	}
45 | 	
46 | 	/**
47 | 	 * Saves new person. Spring automatically binds the name
48 | 	 * and age parameters in the request to the person argument
49 | 	 * @param person
50 | 	 * @return String indicating success or failure of save
51 | 	 */
52 | 	@RequestMapping(value="person", method=RequestMethod.POST)
53 | 	@ResponseBody
54 | 	public String savePerson(Person person) {
55 | 		personService.save(person);
56 | 		return "Saved person: " + person.toString();
57 | 	}
58 | }
59 | 


--------------------------------------------------------------------------------
/src/main/java/com/codetutr/domain/Person.java:
--------------------------------------------------------------------------------
 1 | package com.codetutr.domain;
 2 | 
 3 | 
 4 | public class Person {
 5 | 
 6 | 	private String name;
 7 | 	private Integer age;
 8 | 	
 9 | 	public String getName() {
10 | 		return name;
11 | 	}
12 | 
13 | 	public void setName(String name) {
14 | 		this.name = name;
15 | 	}
16 | 	
17 | 	public Integer getAge() {
18 | 		return age;
19 | 	}
20 | 
21 | 	public void setAge(Integer age) {
22 | 		this.age = age;
23 | 	}
24 | 
25 | 	@Override
26 | 	public String toString() {
27 | 		return "Person [name=" + name + ", age=" + age + "]";
28 | 	}
29 | 	
30 | 	
31 | }
32 | 


--------------------------------------------------------------------------------
/src/main/java/com/codetutr/service/PersonService.java:
--------------------------------------------------------------------------------
 1 | package com.codetutr.service;
 2 | 
 3 | import com.codetutr.domain.Person;
 4 | 
 5 | public interface PersonService {
 6 | 	public Person getRandom();
 7 | 	public Person getById(Long id);
 8 | 	public void save(Person person);
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/main/java/com/codetutr/service/PersonServiceImpl.java:
--------------------------------------------------------------------------------
 1 | package com.codetutr.service;
 2 | 
 3 | import java.util.Random;
 4 | 
 5 | import org.springframework.stereotype.Service;
 6 | 
 7 | import com.codetutr.domain.Person;
 8 | 
 9 | @Service
10 | public class PersonServiceImpl implements PersonService {
11 | 
12 | 	String[] names = {"Nikolaus Otto", "Robert Ford", "Gottlieb Daimler", "Lt. General Masaharu Homma"};
13 | 
14 | 	@Override
15 | 	public Person getRandom() {
16 | 		Person person = new Person();
17 | 		person.setName(randomName());
18 | 		person.setAge(randomAge());
19 | 		return person;
20 | 	}
21 | 
22 | 	@Override
23 | 	public Person getById(Long id) {
24 | 		Person person = new Person();
25 | 		person.setName(names[id.intValue()]);
26 | 		person.setAge(50);
27 | 		return person;
28 | 	}
29 | 	
30 | 	@Override
31 | 	public void save(Person person) {
32 | 		// Save person to database ...
33 | 	}
34 | 	
35 | 	private Integer randomAge() {
36 | 		Random random = new Random();
37 | 		return 10 + random.nextInt(100);
38 | 	}
39 | 
40 | 	private String randomName() {
41 | 		Random random = new Random();
42 | 		return names[random.nextInt(names.length)];
43 | 	}
44 | 
45 | }
46 | 


--------------------------------------------------------------------------------
/src/main/java/com/codetutr/springconfig/WebConfig.java:
--------------------------------------------------------------------------------
 1 | package com.codetutr.springconfig;
 2 | 
 3 | import org.springframework.context.annotation.Bean;
 4 | import org.springframework.context.annotation.ComponentScan;
 5 | import org.springframework.context.annotation.Configuration;
 6 | import org.springframework.web.servlet.config.annotation.EnableWebMvc;
 7 | import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
 8 | import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
 9 | import org.springframework.web.servlet.view.InternalResourceViewResolver;
10 | 
11 | @Configuration
12 | @EnableWebMvc
13 | @ComponentScan(basePackages="com.codetutr")
14 | public class WebConfig extends WebMvcConfigurerAdapter {
15 | 
16 | 	/**
17 | 	 * Since we don't have any controller logic, simpler to just
18 | 	 * define controller for page using View Controller. Note:
19 | 	 * had to extend WebMvcConfigurerAdapter to get this functionality
20 | 	 * @param registry
21 | 	 */
22 | 	@Override
23 | 	public void addViewControllers(ViewControllerRegistry registry) {
24 | 		registry.addViewController("/").setViewName("home");
25 | 	}
26 | 	
27 | 	@Bean
28 | 	public InternalResourceViewResolver viewResolver() {
29 | 		InternalResourceViewResolver resolver = new InternalResourceViewResolver();
30 | 		resolver.setPrefix("/WEB-INF/view/");
31 | 		resolver.setSuffix(".jsp");
32 | 		return resolver;
33 | 	}
34 | 	
35 | }
36 | 


--------------------------------------------------------------------------------
/src/main/webapp/WEB-INF/view/formPage.jsp:
--------------------------------------------------------------------------------
 1 | <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 2 | <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
 3 | 
 4 | <!DOCTYPE HTML>
 5 | <html>
 6 |   <head>
 7 |     <title>Sample Application</title>
 8 |     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 9 |     <style>
10 |     	body { background-color: #eee; font: helvetica; }
11 |     	#container { width: 500px; background-color: #fff; margin: 30px auto; padding: 30px; border-radius: 5px; box-shadow: 5px; }
12 |     	.green { font-weight: bold; color: green; }
13 |     	.message { margin-bottom: 10px; }
14 |     	label {width:70px; display:inline-block;}
15 |     	.hide { display: none; }
16 |     </style>
17 |   </head>
18 |   <body>
19 | 	
20 | 	<div id="container">
21 | 	
22 | 		<h2>Create Person!</h2>
23 | 		<c:if test="${not empty message}"><div class="message green">${message}</div></c:if>
24 | 		
25 | 		<form:form modelAttribute="person">
26 | 			<label for="nameInput">Name: </label>
27 | 			<form:input path="name" id="nameInput" />
28 | 			<br/>
29 | 			
30 | 			<label for="ageInput">Age: </label>
31 | 			<form:input path="age" id="ageInput" />
32 | 			<br/>
33 | 			
34 | 			<label for="sexOptions">Sex: </label>
35 | 			<form:select path="sex" id="sexOptions">
36 | 				<form:option value="">Select Sex</form:option>
37 | 				<form:option value="MALE">Male</form:option>
38 | 				<form:option value="FEMALE">Female</form:option>
39 | 			</form:select>
40 | 			<br/>
41 | 			
42 | 			<label for="newsletterCheckbox">Nesletter? </label>
43 | 			<form:checkbox path="receiveNewsletter" id="newsletterCheckbox" />
44 | 			<br/>
45 | 			<label for="frequencySelect">Freq:</label>
46 | 			<form:select path="newsletterFrequency" id="frequencySelect">
47 | 				<form:option value="">Select Newsletter Frequency: </form:option>
48 | 				<c:forEach items="${frequencies}" var="frequency">
49 | 					<form:option value="${frequency}">${frequency}</form:option>
50 | 				</c:forEach>
51 | 			</form:select>
52 | 			<br/>
53 | 			
54 | 			<br/>
55 | 			<input type="submit" value="Submit" />
56 | 		</form:form>
57 | 		
58 | 		<br/><br/>
59 | 		<hr />
60 | 		<h2>Random Person Generator</h2>
61 | 		<input type="submit" id="randomPerson" value="Get Random Person" />
62 | 		<div id="personResponse"> </div>
63 | 	</div>
64 | 	
65 | 	
66 | 	<script type="text/javascript">
67 | 	
68 | 		$(document).ready(function() {
69 | 			
70 | 			$('#randomPerson').click(function() {
71 | 				$.getJSON('${pageContext.request.contextPath}/api/person/random', function(person) {
72 | 					$('#personResponse').text(person.name + ', age ' + person.age);
73 | 				});
74 | 			});
75 | 			
76 | 			$('#newsletterCheckbox').change(function() {
77 | 				toggleFrequencySelectBox();
78 | 			})
79 | 			
80 | 			toggleFrequencySelectBox(); // show/hide box on page load
81 | 		});
82 | 		
83 | 		function toggleFrequencySelectBox() {
84 | 			if(!$('#newsletterCheckbox').is(':checked')) {
85 | 				$('#frequencySelect').val('');
86 | 				$('#frequencySelect').prop('disabled', true);
87 | 			} else {
88 | 				$('#frequencySelect').prop('disabled', false);
89 | 			}
90 | 		}
91 | 	
92 | 	</script>
93 | 	
94 |   </body>
95 | </html>


--------------------------------------------------------------------------------
/src/main/webapp/WEB-INF/view/home.jsp:
--------------------------------------------------------------------------------
  1 | <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  2 | <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
  3 | 
  4 | <!DOCTYPE HTML>
  5 | <html>
  6 |   <head>
  7 |     <title>Spring MVC - Ajax</title>
  8 |     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  9 |     <style>
 10 |     	body { background-color: #eee; font: helvetica; }
 11 |     	#container { width: 500px; background-color: #fff; margin: 30px auto; padding: 30px; border-radius: 5px; box-shadow: 5px; }
 12 |     	.green { font-weight: bold; color: green; }
 13 |     	.message { margin-bottom: 10px; }
 14 |     	label { width:70px; display:inline-block;}
 15 |     	.hide { display: none; }
 16 |     	.error { color: red; font-size: 0.8em; }
 17 |     </style>
 18 |   </head>
 19 |   <body>
 20 | 	
 21 | 	<div id="container">
 22 | 	
 23 | 		<h1>Person Page</h1>
 24 | 		<p>This page demonstrates Spring MVC's powerful Ajax functionality. Retrieve a
 25 | 		random person, retrieve a person by ID, or save a new person, all without page reload.
 26 | 		</p>
 27 | 		
 28 | 		<h2>Random Person Generator</h2>
 29 | 		<input type="submit" id="randomPerson" value="Get Random Person" /><br/><br/>
 30 | 		<div id="personResponse"> </div>
 31 | 		
 32 | 		<hr/>
 33 | 		
 34 | 		<h2>Get By ID</h2>
 35 | 		<form id="idForm">
 36 | 			<div class="error hide" id="idError">Please enter a valid ID in range 0-3</div>
 37 | 			<label for="personId">ID (0-3): </label><input name="id" id="personId" value="0" type="number" />
 38 | 			<input type="submit" value="Get Person By ID" /> <br /><br/>
 39 | 			<div id="personIdResponse"> </div>
 40 | 		</form>
 41 | 		
 42 | 		<hr/>
 43 | 		
 44 | 		<h2>Submit new Person</h2>
 45 | 		<form id="newPersonForm">
 46 | 			<label for="nameInput">Name: </label>
 47 | 			<input type="text" name="name" id="nameInput" />
 48 | 			<br/>
 49 | 			
 50 | 			<label for="ageInput">Age: </label>
 51 | 			<input type="text" name="age" id="ageInput" />
 52 | 			<br/>
 53 | 			<input type="submit" value="Save Person" /><br/><br/>
 54 | 			<div id="personFormResponse" class="green"> </div>
 55 | 		</form>
 56 | 	</div>
 57 | 	
 58 | 	
 59 | 	<script type="text/javascript">
 60 | 	
 61 | 		$(document).ready(function() {
 62 | 			
 63 | 			// Random Person AJAX Request
 64 | 			$('#randomPerson').click(function() {
 65 | 				$.getJSON('${pageContext.request.contextPath}/api/person/random', function(person) {
 66 | 					$('#personResponse').text(person.name + ', age ' + person.age);
 67 | 				});
 68 | 			});
 69 | 			
 70 | 			// Request Person by ID AJAX
 71 | 			$('#idForm').submit(function(e) {
 72 | 				var personId = +$('#personId').val();
 73 | 				if(!validatePersonId(personId)) 
 74 | 					return false;
 75 | 				$.get('${pageContext.request.contextPath}/api/person/' + personId, function(person) {
 76 | 					$('#personIdResponse').text(person.name + ', age ' + person.age);
 77 | 				});
 78 | 				e.preventDefault(); // prevent actual form submit
 79 | 			});
 80 | 			
 81 | 			// Save Person AJAX Form Submit
 82 | 			$('#randomPerson').click(function() {
 83 | 				$.getJSON('${pageContext.request.contextPath}/api/person/random', function(person) {
 84 | 					$('#personResponse').text(person.name + ', age ' + person.age);
 85 | 				});
 86 | 			});
 87 | 			
 88 | 			$('#newPersonForm').submit(function(e) {
 89 | 				// will pass the form date using the jQuery serialize function
 90 | 				$.post('${pageContext.request.contextPath}/api/person', $(this).serialize(), function(response) {
 91 | 					$('#personFormResponse').text(response);
 92 | 				});
 93 | 				
 94 | 				e.preventDefault(); // prevent actual form submit and page reload
 95 | 			});
 96 | 			
 97 | 		});
 98 | 		
 99 | 		function validatePersonId(personId) {
100 | 			console.log(personId);
101 | 			if(personId === undefined || personId < 0 || personId > 3) {
102 | 				$('#idError').show();
103 | 				return false;
104 | 			}
105 | 			else {
106 | 				$('#idError').hide();
107 | 				return true;
108 | 			}
109 | 		}
110 | 		
111 | 	
112 | 	</script>
113 | 	
114 |   </body>
115 | </html>


--------------------------------------------------------------------------------
/src/main/webapp/WEB-INF/web.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
 3 | xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 4 | xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 5 | 
 6 |   <servlet>
 7 |     <servlet-name>sample</servlet-name>
 8 |     <servlet-class>
 9 |         org.springframework.web.servlet.DispatcherServlet
10 |     </servlet-class>
11 |     <init-param>
12 |       <param-name>contextClass</param-name>
13 |       <param-value>org.springframework.web.context.support.AnnotationConfigWebApplicationContext</param-value>
14 |     </init-param>
15 |     <init-param>
16 |       <param-name>contextConfigLocation</param-name>
17 |       <param-value>com.codetutr.springconfig</param-value>
18 |     </init-param>
19 |   </servlet>
20 |   
21 |   <servlet-mapping>
22 |     <servlet-name>sample</servlet-name>
23 |     <url-pattern>/</url-pattern>
24 |   </servlet-mapping>
25 | 
26 |   <welcome-file-list>
27 |   	<welcome-file>/</welcome-file>
28 |   </welcome-file-list>
29 | </web-app>
30 | 


--------------------------------------------------------------------------------