一、一般前台向后台提交数据都会用form表单提交
表单提交信息后最好的获取方式就是映射为实体
<form id="testform" method="post">
<input type="text" name="name" />
<input type="text" name="age" />
<input type="text" name="hobby" />
<input id="yxrq" name="birthday" class="easyui-datebox" data-options="editable:false,width:200" />
</form>
private String name;
private Integer age;
private String hobby;
@DateTimeFormat(pattern = "yyyy-MM-dd")
private Date birthday;
public Map<String, Object> test1(Test test1) {
Map<String,Object> map = new HashMap<String, Object>();
System.out.println(test1);
map.put("msg", "success");
return map;
}
成功传过来
注意,当前台输入框传过来的时间格式的数据(字符串),直接映射为Date会失败报400错误,需要处理一下才可以映射成功
比较简单的方法是上图在实体类前面加一个注解,将字符串格式化为时间格式。也可以用其他方法,比如全局配置详见
https://blog.csdn.net/chenleixing/article/details/45156617
表单提交的时候 1、顺序不一样可以映射过去。2、少属性可以映射过去。3、多属性可以映射过去
@RequestMapping("/test1")
public Map<String, Object> test1(Test test1,String password) {
Map<String,Object> map = new HashMap<String, Object>();
System.out.println(test1);
System.out.println(password);
map.put("Msg", "success");
return map;
}
<form id="testform" method="post">
<input type="text" name="name" />
<input type="text" name="age" />
<input type="text" name="password" />
<input id="yxrq" name="birthday" class="easyui-datebox" data-options="editable:false,width:200" />
</form>
当传递的有文件数据的时候,需要表单加上 enctype="multipart/form-data" 后台参数为 MultipartFile pic
二、可以把form表单的数据转化成json通过ajax提交到后台
json 传到后台的发方法有几种
1.前端传来的是json数据不多时:{key : value},可以直接用@RequestParam来获取值
$.ajax({
type:'POST',
data:{jcxx:"111"},
/* contentType :'application/json', */
dataType:'json',
url :'test/test2',
success :function(data) {
$.messager.alert('提示',data.Msg,'alert');
}
});
public String test2(String jcxx) {可以得到 }
当然你可以把111换成json字符串同样可以得到,再j1和 j2 进行json解析,或者单独得到某一个属性,fastjson等工具都可以很轻松得到数据。
$.ajax({
type:'POST',
data:{"j1":JSON.stringify(jsonobject),"j2":JSON.stringify(jsonobject)},
/* contentType :'application/json', */
dataType:'json',
url :'test/test2',
success :function(data) {
$.messager.alert('提示',data.Msg,'alert');
}
});
public Map<String,Object> test2(String j1 ,String j2) {
关于 contentType:“application/json“之后,向后台发送数据的格式必须为json字符串
用 JSON.stringify(data)将json对象转化为json字符串
不添加 contentType:“application/json“的时候可以向后台发送json对象形式
2.、以实体类方式接收
$.ajax({ //1
type:'POST',
data:jsonobject,
/* contentType :'application/json', */
dataType:'json',
url :'test/test2',
success :function(data) {
$.messager.alert('提示',data.Msg,'alert');
}
});
@RequestMapping("/test2")
public String test2(Test test) {
Map<String,Object> map = new HashMap<String, Object>();
System.out.println(test);
return "ok";
}
$.ajax({ //2
type:'POST',
data:JSON.stringify(jsonobject),
contentType :'application/json',
dataType:'json',
url :'test/test2',
success :function(data) {
$.messager.alert('提示',data.Msg,'alert');
}
});
@RequestMapping("/test2")
public String test2(@RequestBody Test test) {
Map<String,Object> map = new HashMap<String, Object>();
System.out.println(test);
return "ok";
}
json 对象的话,可以自己将表单数据处理成json数据
var data = $("#testform").serializeArray();//方法一,自己转换
var jsonobject = {};
for(var i = 0;i < data.length;i++){
jsonobject[data[i].name] = data[i].value;
}
var jsonobject = $('#testform').serializeJSON()//方法二,使用别人写好的方法
需要引入
<script type="text/javascript" src="jquery-easyui-1.6.9/jquery.serializejson.js"></script>
项目地址:https://github.com/marioizquierdo/jquery.serializeJSON
3.map接收
$.ajax({
type:'POST',
data:JSON.stringify(jsonobject),
contentType :'application/json',
dataType:'json',
url :'test/test2',
success :function(data) {
$.messager.alert('提示',data.Msg,'alert');
}
});
@RequestMapping("/test2")
public Map<String,Object> test2(@RequestBody Map<String, Object> map) {
Map<String,Object> map1 = new HashMap<String, Object>();
System.out.println(map);
map.put("Msg", "ok");
return map1;
}
@requestBody注解常用来处理content-type不是默认的application/x-www-form-urlcoded编码的内容,比如说:application/json或者是application/xml等。一般情况下来说常用其来处理application/json类型。
contentType :'application/json',需要data是字符串,而不是对象
4.以List接收
json数组转化传到后台
部分参考自:https://blog.csdn.net/weixin_39220472/article/details/80725574