When working on a web application, we need to deal with many Ajax requests. With the use of JQuery working with AJax (post and gets) in Spring MVC is very easy. Let us see some code samples of Spring MVC Ajax Handling using JQuery.
In the example below we will do the following.
1. Create a form to get Data
2. Post the data using a Ajax request to the Controller.
3. In the Controller receive the data as a object and process it.
4. Return a new object from the Controller.
5. In the Ajax code, receive the new object and display it on the UI.
Now lets see the code used to do this.
1. Create Developer and DefectSeverityDetails Object.
|
1 2 3 4 5 6 7 8 9 10 |
package com.kscodes.sampleproject.model; public class Developer { private String id; private String firstName; private String lastName; // Getter Setters } |
|
1 2 3 4 5 6 7 8 9 10 |
package com.kscodes.sampleproject.model; public class DefectSeverityDetails { private int high; private int low; private int medium; // Getter Setters } |
2. Create a JSP page to show the Form
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<h2>Enter Developer 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 colspan="2"><input type="button" id="submit" value="Submit" /></td> </tr> </table> |
3. Controller to process request and send response back
|
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 |
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.Developer; import com.kscodes.sampleproject.model.DefectSeverityDetails; @Controller @RequestMapping(value = "/ajax") public class AjaxHandlingController { @RequestMapping(value = "/getDefectCount", method = RequestMethod.POST, produces = "application/json") public @ResponseBody DefectSeverityDetails postEmployeeData(@RequestBody Developer developer) { // process the developer object // Your implementation. For demo I hard-coded the Defect counts DefectSeverityDetails defectSeverityDetails = new DefectSeverityDetails(); defectSeverityDetails.setHigh(3); defectSeverityDetails.setMedium(2); defectSeverityDetails.setLow(8); return defectSeverityDetails; } @RequestMapping(value = "/developerDefects") public String showEmployeePage() { return "developerDefects"; } } |
4. Ajax request to Post data to Controller
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$("#submit").click(function(){ var developerData = {}; developerData["id"] = $("#id").val(); developerData["firstName"] = $("#firstName").val(); developerData["lastName"] = $("#lastName").val(); $.ajax({ type : "POST", contentType : "application/json", url : "getDefectCount", data : JSON.stringify(developerData), dataType : 'json', success : function(data) { // Code to display the response. } }); }); |
5. Code in JSP to display the response.
|
1 2 3 4 5 6 |
<div id="defectCountDiv" style="display:none"> <h3>Defects assigned to you:</h3> High - <b><span id="highDefects"></span></b><br/> Medium - <b><span id="mediumDefects"></span></b><br/> Low - <b><span id="lowDefects"></span></b><br/> </div> |
6. Code in Ajax success method to display response.
|
1 2 3 4 5 6 |
success : function(data) { $('#defectCountDiv').show(); $('#highDefects').text(data.high); $('#mediumDefects').text(data.medium); $('#lowDefects').text(data.low); } |
Output
a) Open the form http://localhost:8080/sampleproject/ajax/developerDefects
b) Add data to the Form and Submit
c) You will see the Request and Response params in the debugger tools
d) Display results
