首页 > 代码库 > springMVC之浏览器到后台的数据传递
springMVC之浏览器到后台的数据传递
在讲浏览器到后台的数据传递之前先了解几个概念:
json对象,json字符串,spingMVC的注解@requestBody,ajax请求的参数contentType
var data =http://www.mamicode.com/ {
"name":"spring",
"age":"20"
};
类似这种格式的就是json对象.json对象的字符串格式就是json字符串.javaScript中有两个关于JSON的工具:
//将字符串类型的data转化成json对象
JSON.parse(data);
//将json对象类型的data转化成json字符串
JSON.stringify(data);
在js中对象是不能直接alert的,如果alert(data),会弹出"[Object,Object]".但是字符串是可以直接alert的,可以alert(JSON.stringify(data)),会直接输出"name":"spring", "age":"20".
下面是网上关于@requestBody的介绍,@RequestBody主要是转化浏览器传来的json格式数据的.
@RequestBody
作用：
i) 该注解用于读取Request请求的body部分数据，使用系统默认配置的HttpMessageConverter进行解析，然后把相应的数据绑定到要返回的对象上；
ii) 再把HttpMessageConverter返回的对象数据绑定到 controller中方法的参数上。
使用时机：
A) GET、POST方式提时， 根据request header Content-Type的值来判断:
application/x-www-form-urlencoded， 可选（即非必须，因为这种情况的数据@RequestParam, @ModelAttribute也可以处理，当然@RequestBody也能处理）；
multipart/form-data, 不能处理（即使用@RequestBody不能处理这种格式的数据）；
其他格式， 必须（其他格式包括application/json, application/xml等。这些格式的数据，必须使用@RequestBody来处理）；
经常使用ajax发送请求的程序员,对contentType应该不陌生.contentType是ajax请求中的一个参数,是用来规定提交数据的方式.主要有四种方式:
-
application/x-www-form-urlencoded
这种方式是jQuery默认的方式,可以适合大多数的情况.这种方式会将数据转化成一个字符串(username=”admin”&password=123)提交.
-
multipart/form-data
这种方式是用来上传文件的.我们使用表单上传文件时，必须让 form 的 enctyped 等于这个值。
-
application/json
这种方式必须使用json字符串来作为参数,用来告诉服务端消息主体是序列化后的 JSON 字符串。
-
text/xml
这种方式对参数的要求比较高,目前使用的并不多.
了解了上面的四个概念,下面我们直接来个复杂的请求实体来实践:
这个实体有一个List<ErpVisitor>类型的属性.
public class ModifyOrderRequestVo {
private String orderId;
private String orderSource;
private String contactName;
private String contactTel;
private String contactEmail;
private List<ErpVisitor> visitors;
//setter getter
}
想在后台成功接收到参数有很多方法，我总结了几个常用方法：
方法一：万能方法
不管后台需要哪些数据，都用String类型接收，ajax的请求参数用JSON.stringify()将json对象转换成字符串,contentType设置为application/json.在后台接受参数时需要使用@RequestBogy注解.在成功接受到了浏览器传来的字符串之后,使用fastjson中的工具将json字符串转化成相应的实体类.
后台代码
@RequestMapping("modify")
@ResponseBody
public AjaxResponse modify(@RequestBody String str){
JSONObject parseObject = JSONObject.parseObject(str);
ModifyOrderRequestVo2 vo = JSONObject.toJavaObject(parseObject, ModifyOrderRequestVo2.class);
js代码
var visitors =[];
$.each($(".visitorInfo"),function(){
var visitor ={
"name":$(this).find("input[name=‘name‘]").val(),
"isAdult":true,
"mobelPhone":$(this).find("input[name=‘mobelPhone‘]").val(),
"idType":$(this).find("input[name=‘idType‘]").val(),
"gender":$(this).find("input[name=‘gender‘]:checked").val()
};
visitors.push(visitor);
});
var data = {
"orderId":$("input[name=‘orderId‘]").val(),
"orderSource":$("input[name=‘orderSource‘]").val(),
"contactName":$("input[name=‘contactName‘]").val(),
"contactTel":$("input[name=‘contactTel‘]").val(),
"contactEmail":$("input[name=‘contactEmail‘]").val(),
"visitors":visitors
};
//var data = http://www.mamicode.com/getFormJson("#modifyForm");
//data["totalOrderFee"] = $("#totalOrderFee").text();
$.ajax({
url:modifyUrl,
contentType:"application/json",
data:JSON.stringify(data),
type:"POST",
dataType:"json",
success:function(res){
//alertWindow("success","success");
},
error:function(){
//alertWindow("操作失败","warn");
}
});
方法二:使用请求实体类接受参数
@RequestMapping("modify")
@ResponseBody
public AjaxResponse modify(@RequestBody ModifyOrderRequestVo vo){
}
方法三 使用form表单提交请求
var data = http://www.mamicode.com/getFormJson("#modifyForm");
$.ajax({
url:modifyUrl,
//contentType:"application/json",
data:data,
type:"POST",
dataType:"json",
success:function(res){
//alertWindow("success","success");
},
error:function(){
//alertWindow("操作失败","warn");
}
});
@RequestMapping("modify")
@ResponseBody
public AjaxResponse modify(ModifyOrderRequestVo vo){
}
以上这三种方法都是针对比较复杂的参数的。对于请求参数比较简单的还可以有更多的方式。
总结下ajax传递参数无外就是以json对象传递或者json字符串传递。使用json字符串时需要注意contentType的设置和后台@RequestBody注解的使用。
springMVC之浏览器到后台的数据传递