回顾jQuery Ajax表单POST和Spring MVC示例,找出以下模式:
<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>
在Spring MVC中,使用@RequestParam
接受Ajax POST数据。
@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
}
上面的代码工作正常,只是有点怪异且难以维护。 Javascript $.post
和Spring MVC @RequestParam
都处理太多参数。
1.重构JavaScript
在Javascript中,我更喜欢使用$.ajax
,将所有内容存储到数组中并将其发布到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.重构Spring MVC
2.1创建一个POJO来存储Ajax POST数据。
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使用@RequestBody
接受Ajax POST数据
@RestController
//...
@RequestMapping(value = "/path-to/hosting/save", method = RequestMethod.POST)
public String updateHosting(@RequestBody HostingForm hostingForm) {
//...
}
使用@RequestBody
HostingForm
,Spring将自动将POST数据映射到HostingForm
POJO(按名称)。 做完了
注意
您可以在本教程上感兴趣– 完整的Spring 4 MVC + Ajax Form Post示例
参考文献
翻译自: https://mkyong.com/spring-mvc/spring-mvc-refactoring-a-jquery-ajax-post-example/