想要了解怎么使用Ajax提交的application/x-www-form-urlencoded;charset=UTF-8;以及application/json;charset=UTF-8; charset=UTF-8;首先需要了解@RequestParam注解和@RequestBody注解
@RequestParam注解:意思是获取表单提交的数据,如
//伪代码
public void abc(@RequestParam(value="id" int id){
/// xxxx代码
}
也可以在value后加上defaultValue默认值以及是否必填required
@RequestBody注解:意思是获取前端发送的json格式数据,如
//ajax伪代码
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var json = {
"username" : username,
"password" : password
};$.ajax({
data: JSON.stringify(json)
});
//controller伪代码
public void abc(@RequestBody Map<String,Object> map 或者 @RequestBody User user ){
// xxxxx
}
注 : 使用@RequestBody接收数据,必须接收的是json数据
了解了两个注解后去使用application/x-www-form-urlencoded; charset=UTF-8以及application/json; charset=UTF-8; 来做一个小小的测试
什么是application/x-www-form-urlencoded;呢?
这个是一个默认的HTTP提交方式,并且是K/V格式的
什么是application/x-www-form-urlencoded可以进行详细了解
接下来直接code,首先是application/x-www-form-urlencoded;charset=UTF-8;
Ajax代码
script src="<%=basePath%>js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$.ajax({
url:"ceshi4",
type:"POST",
data: $("#myform").serialize() , //提交id是myform的整个表单信息
success:function(data){
for(var i in data){
alert(JSON.stringify(data));//alert json对象
}
},
contentType : "application/x-www-form-urlencoded; charset=UTF-8",
//contentType : "application/json; charset=UTF-8",
dataType:"json"
});
}
</script>
Controller代码
@RequestMapping(value="/ceshi4",method=RequestMethod.POST)
@ResponseBody
//如果使用对象封装前端传来数据去掉@RequestParam
public Map<Object,Object> ddd(@RequestParam Map<String,Object> map ){
Map<Object,Object> m = new HashMap<Object, Object>();
Object username = map.get("username").toString();
Object password = map.get("password").toString();
System.out.println(username);
System.out.println(password);
m.put("username", username);
m.put("password", password);
return m;
}
结果
如果使用Pojo对象来接收ajax发送的表单信息
必须去掉@RequestParam
@RequestMapping(value="/ceshi4",method=RequestMethod.POST)
@ResponseBody
//如果使用对象封装前端传来数据去掉@RequestParam
public Map<Object,Object> ddd( User user){
Map<Object,Object> m = new HashMap<Object, Object>();
System.out.println(user.getUsername());
System.out.println(user.getPassword());
m.put("username", user.getUsername());
m.put("password", user.getPassword());
return m;
}
结果
接下来是使用的是application/json; charset=UTF-8; 做测试
ajax代码
function fn1(){
//alert("1");
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var json = {
"username" : username,
"password" : password
};
$.ajax({
url:"ceshi4",
type:"POST",
data:JSON.stringify(json), //转换成json
success:function(data){
for(var i in data){
alert(JSON.stringify(data));//alert json对象
}
},
//contentType : "application/x-www-form-urlencoded; charset=UTF-8",
contentType : "application/json; charset=UTF-8",
dataType:"json"
});
}
注意:我们需要把提交的表单数据转换成json格式,以及contentType : "application/json; charset=UTF-8",使用json提交
Controller代码
@RequestMapping(value="/ceshi4",method=RequestMethod.POST)
@ResponseBody
public Map<Object,Object> ddd(@RequestBody Map<String,Object> map ){
Map<Object,Object> m = new HashMap<Object, Object>();
Object username = map.get("username").toString();
Object password = map.get("password").toString();
System.out.println(username);
System.out.println(password);
m.put("username", username);
m.put("password", password);
return m;
}
不要忘了@RequestBody注解,不要忘了@RequestBody注解,不要忘了@RequestBody注解
结果
使用Pojo实体类接收
@RequestMapping(value="/ceshi4",method=RequestMethod.POST)
@ResponseBody
public Map<Object,Object> ddd(@RequestBody User user){
System.out.println(user.getUsername());
System.out.println(user.getPassword());
m.put("username", user.getUsername());
m.put("password", user.getPassword());
return m;
}
结果
后记
如果使用Pojo实体类来接收前端提交的表单信息,如果是application/x-www-form-urlencoded;,那么必须去掉@RequestParam注解,如果使用的是application/json;必须加上@RequestBody,无论是Pojo对象或者是Map对象。
以上就是@RequestParam和@RequestBody以及Http两个提交方式application/x-www-form-urlencoded;以及application/json;的基本使用,如果其中有错的地方我会尽快修改,也互相学习,好记性不如烂笔头。