In the previous post we have seen how we can get the JSON data from the Controllers using the @ResponseBody. Similarly posting JSON data/objects to the Controllers from views is also easy in Spring MVC. JSON data can be posted to Spring MVC controllers using the @RequestBody annotation. We will see the Spring MVC Json request example using the @RequestBody.
In the steps below we will be doing the following
a. Display a Form to user to fill in Employee data
b. Use JQuery to get the data and using Ajax post it to the Spring Controller as JSON data
c. In Controllers use the @RequestBody to get the data
d. Process the data and then send it back using @ResponseBody
e. On Jsp display back the processed data.
Now lets the code to achieve it.
1. Employee Model
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
package com.kscodes.sampleproject.model; public class Employee { private String id; private String firstName; private String lastName; private int age; private double salary; public Employee() { super(); } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getFirstName() { return firstName; } public void setFirstName(String firstName) { this.firstName = firstName; } public String getLastName() { return lastName; } public void setLastName(String lastName) { this.lastName = lastName; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public double getSalary() { return salary; } public void setSalary(double salary) { this.salary = salary; } } |
2. Controller
In the controller we are getting the Employee data, Adding 1000 to the Salary and then again returning the Employee object as JSON.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
package com.kscodes.sampleproject.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import com.kscodes.sampleproject.model.Employee; @Controller @RequestMapping(value = "/json") public class JsonRequestController { @RequestMapping(value = "/postEmployee", method = RequestMethod.POST, produces = "application/json") public @ResponseBody Employee postEmployeeData(@RequestBody Employee employee) { double newSalary = employee.getSalary() + 1000; employee.setSalary(newSalary); return employee; } @RequestMapping(value = "/addEmployee") public String showEmployeePage(){ return "addEmployee"; } } |
3. JSP View to get and display data
In the View first we get the data from User. On Submit send the data to controller.
Once data is processed and returned back we display it as JSON in a new DIV.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%> <html> <head> <title>Spring MVC - JSON Request Sample</title> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> </head> <body> <h2>Enter Employee Details</h2> <table> <tr> <td>Id</td> <td><input type="text" id="id"></td> </tr> <tr> <td>First Name</td> <td><input type="text" id="firstName"></td> </tr> <tr> <td>Last Name</td> <td><input type="text" id="lastName"></td> </tr> <tr> <td>Age</td> <td><input type="text" id="age"></td> </tr> <tr> <td>Salary</td> <td><input type="text" id="salary"></td> </tr> <tr> <td colspan="2"><input type="button" id="submit" value="Submit" /></td> </tr> </table> <hr/> <div id="displayDiv" style="display:none"><h3>JSON Data returned from Server after processing</h3> <div id="processedData"></div> </div> <script> jQuery(document).ready(function($) { $("#submit").click(function(){ var employeeData = {}; employeeData["id"] = $("#id").val(); employeeData["firstName"] = $("#firstName").val(); employeeData["lastName"] = $("#lastName").val(); employeeData["age"] = $("#age").val(); employeeData["salary"] = $("#salary").val(); $.ajax({ type : "POST", contentType : "application/json", url : "postEmployee", data : JSON.stringify(employeeData), dataType : 'json', success : function(data) { $('#processedData').html(JSON.stringify(data)); $('#displayDiv').show(); } }); }); }); </script> </body> </html> |
Output
As you can see we had entered Salary = 3500, but since we are adding 1000 to Salary in the Controller, the returned data shows Salary as 4500.
