Spring MVC – Refactoring a jQuery Ajax Post example

Reviewing a jQuery Ajax form POST and Spring MVC example, find out the following patterns :


<script>
  jQuery(document).ready(
	function($) {

	  $("#btn-save").click(function(event) {

		var id = $('#id').val();
		var domain = $('#domain').val();
		var name = $('#name').val();
		var desc = $('#desc').val();
		var tags = $('#tags').val();
		var afflink = $('#afflink').val();
		var cdn = $("#cdn").prop("checked") ? true : false;
		var hosting = $("#hosting").prop("checked") ? true : false;
		var paas = $("#paas").prop("checked") ? true : false;
		var display = $("#display").prop("checked") ? true : false;
		var imageUrl = $('#imageUrl').val();
		var favUrl = $('#favUrl').val();
		var whoisPattern = $('#whoisPattern').val();

		$("#btn-save").prop("disabled", true);

		$.post("/path-to/hosting/save", {
			id : id,
			domain : domain,
			name : name,
			desc : desc,
			tags : tags,
			afflink : afflink,
			display : display,
			hosting : hosting,
			cdn : cdn,
			paas : paas,
			imageUrl : imageUrl,
			favUrl : favUrl,
			whoisPattern : whoisPattern
		}, function(data) {

			var json = JSON.parse(data);
			//...

		}).done(function() {
		}).fail(function(xhr, textStatus, errorThrown) {
		}).complete(function() {
			$("#btn-save").prop("disabled", false);
					
		});

	});

  });
</script>

In Spring MVC, use @RequestParam to accept the Ajax POST data.


	@RequestMapping(value = "/path-to/hosting/save", method = RequestMethod.POST)
	@ResponseBody
    public String saveHosting(
		@RequestParam int id, @RequestParam String domain, @RequestParam String name,
		@RequestParam String desc, @RequestParam String tags, @RequestParam String afflink,
		@RequestParam boolean display, @RequestParam boolean hosting, 
		@RequestParam boolean cdn, @RequestParam boolean paas,
		@RequestParam String imageUrl, @RequestParam String favUrl,
		@RequestParam String whoisPattern
    ) {
        //...do something
    }

The above code is working fine, just a bit weird and hard to maintain. Both Javascript $.post and Spring MVC @RequestParam is dealing with too many parameters.

1. Refactoring JavaScript

In Javascript, I prefer to use $.ajax, store everything into an array and POST it to Spring MVC.


<script>
  jQuery(document).ready(
	function($) {

		$("#btn-save").click(function(event) {

			var data = {}
			data["id"] = $("#id").val();
			data["domain"] = $("#domain").val();
			data["name"] = $("#name").val();
			data["desc"] = $("#desc").val();
			data["tags"] = $("#tags").val();
			data["afflink"] = $("#afflink").val();
			data["cdn"] = $("#cdn").prop("checked") ? true : false;
			data["hosting"] = $("#hosting").prop("checked") ? true : false;
			data["paas"] = $("#paas").prop("checked") ? true : false;
			data["display"] = $("#display").prop("checked") ? true : false;
			data["imageUrl"] = $("#imageUrl").val();
			data["favUrl"] = $("#favUrl").val();
			data["whoisPattern"] = $("#whoisPattern").val();

			$("#btn-save").prop("disabled", true);

			$.ajax({
		             type: "POST",
		             contentType: "application/json",
		             url: "/path-to/hosting/save",
		             data: JSON.stringify(data),
		             dataType: 'json',
		             timeout: 600000,
		             success: function (data) {
		                 $("#btn-update").prop("disabled", false);
		                 //...
		             },
		             error: function (e) {
		                 $("#btn-save").prop("disabled", false);
		                 //...
		             }
			});
		

		});

	});
</script>

2. Refactoring Spring MVC

2.1 Create a POJO to store the Ajax POST data.


public class HostingForm {

    private boolean display;
    private boolean cdn;
    private boolean hosting;
    private boolean paas;
    private String whoisPattern;
    private long id;
    private String domain;
    private String name;
    private String desc;
    private String tags;
    private String affLink;
    private String imageUrl;
    private String favUrl;

    //getters and setters

2.2 Accept the Ajax POST data with @RequestBody


@RestController
//...

    @RequestMapping(value = "/path-to/hosting/save", method = RequestMethod.POST)
    public String updateHosting(@RequestBody HostingForm hostingForm) {
        //...
    }

With @RequestBody, Spring will maps the POST data to HostingForm POJO (by name) automatically. Done.

Note
You mat interest at this tutorial – Complete Spring 4 MVC + Ajax Form Post example

References

  1. jQuery $.ajax documentation
  2. Spring @RequestBody
  3. Spring @RequestParam

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
2 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Naidumkyongemirates Recent comment authors
newest oldest most voted
Naidu
Guest
Naidu

i sending formdata to controller class. in controller how to access these data? $(“button#submitMDRtable”).click(function(){ var data = []; var minAmt, maxAmt, type, minCap, maxCap; $(“table tbody tr”).each(function(index) { minAmt = $(this).find(‘.minAmt’).text(); maxAmt = $(this).find(‘.maxAmt’).text(); type = $(this).find(‘.type’).text(); minCap = $(this).find(‘.minCap’).text(); maxCap = $(this).find(‘.maxCap’).text(); //alert(minAmt+”–“+maxAmt+”–“+type+”–“+minCap+”–“+maxCap) //—->Form validation goes here data.push({ minAmt: minAmt, maxAmt: maxAmt, type: type, minCap: minCap, maxCap: maxCap }); }); submitFormData(data); console.log(data); }); function submitFormData(formData) { var url= ‘/mdrcharges’; alert(url); $.ajax({ type: ‘POST’, data: formData, cache: false, processData: false, contentType: false, beforeSend: beforeSendHandler, url: url, success: function(result){ if(result.success == true) { $(‘.alert-success’).show(); $(‘.alert-danger’).hide(); $(“#successmsg”).html(result.msg); setTimeout(function() { $(“.alert-success”).alert(‘close’); }, 10000);… Read more »

emirates
Guest
emirates

OK. This is an easy example, and everyone saw it a hundred times. But tell us what do you will do if you have here is a JSON:

{“abc”:
{“sr”:”ok”,”citi”:[
{“id”:”c2″,”value”:”london”},{…}…,{…}]}}

etc ?

mkyong
Guest
mkyong

Just send a POST request, along with your JSON data.