ResponseBody
当前端使用Ajax发送请求时,服务器要将数据以JSON的格式响应给浏览器
第一步:添加相关jar包
第二步:在spring的配置文件中写上<mvc:annotation-driven/>
第三步:映射方法的返回值为@ResponseBody
发送Ajax请求
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
</head>
<body>
<input type="button" value="请求JSON" id="btn"/>
<script>
$(function () {
$("#btn").click(function () {
//发送Ajax
/* $.post("服务器地址","{发送请求时携带的参数}",function () {
})*/
//以post发送Ajax请求
$.post("${pageContext.request.contextPath}/getJson",function (data) {
console.log(data);
})
});
});
</script>
</body>
</html>
控制器: @responsebody标签 将数据以json的格式返回给浏览器
//返回的要是一个json格式的数据
@RequestMapping("/getJson")
@ResponseBody
public User getJson(){
User user = new User();
user.setUsername("aaa");
user.setAge(18);
return user;
}
表单序列化
需求:有一form表单,需将form表单中的内容以Ajax请求方式发送给服务器
<form id="myform">
user:<input type="text" name="username"><br>
age:<input type="text" name="age" ><br>
爱好:<input type="checkbox" name="hobby" value="篮球"> 篮球
<input type="checkbox" name="hobby" value="乒乓球"> 乒乓球
<input type="checkbox" name="hobby" value="足球"> 足球
</form>
<input type="button" id="formbtn" value="发送form">
jquery只提供了简单的表单序列化,序列化后的表单内容如下:
$("#formbtn").click(function () {
//获取表单当中所有的参数发送给服务器
var serialize = $("#myform").serialize();
console.log(serialize);
//username=aaa&age=23&hobby=%E7%AF%AE%E7%90%83
//期待格式{username:aaa,age:23}
});
使用 JQuery插件Json序列化,使发送到服务器的形式为json格式
(function($){
$.fn.serializeJson=function(){
var serializeObj={};
var array=this.serializeArray();
var str=this.serialize();
$(array).each(function(){
if(serializeObj[this.name]){
if($.isArray(serializeObj[this.name])){
serializeObj[this.name].push(this.value);
}else{
serializeObj[this.name]=[serializeObj[this.name],this.value];
}
}else{
serializeObj[this.name]=this.value;
}
});
return serializeObj;
};
})(jQuery);
再次向服务器发送Ajax请求可以看到Json序列化后的表单为:
var serializeJson = $("#myform").serializeJson();
console.log(serializeJson);
//Object {username: "aaa", age: "23", hobby: "篮球"}
随后控制器接受浏览器发来的Ajax请求
@RequestMapping("/formJson")
@ResponseBody
public String formJson(User user){
System.out.println(user);
return "success";
}
随后出现的问题是:当只选择一个爱好选项时,服务器可以接收到请求,当选择两个及两个以上上,服务器500报错
原因分析:因为默认的 Content-Type:application/x-www-form-urlencoded,而当选择两个及两个以上时,就不是key-value形式,而是key-array形式,因此服务器无法识别数据,服务器500报错
解决方法:
1.将表单序列化后的数据转换成json字符串
data:JSON.stringify(serializeJson),
2.设置请求头中的contentType:'application/json'
$(function () {
$("#formbtn").click(function () {
//获取表单当中所有的参数发送给服务器
//使用序列化转json插件
var serializeJson = $("#myform").serializeJson();
console.log(serializeJson);
console.log(JSON.stringify(serializeJson));
//Object {username: "aaa", age: "23", hobby: "篮球"}
$.ajax({
type:"post",
url:"${pageContext.request.contextPath}/formJson",
data:JSON.stringify(serializeJson),
dataType:'json',
contentType:'application/json',
success:function (data) {
console.log(data)
}
});
});
});
serializeJson和 JSON.stringify(serializeJson),的格式对比:
数据由key-array转成了key-value格式
注意:dataType 如果表明为json,则返回值一定要是json格式的,否则就会报错。要不去掉datatype,要不改变控制器中返回值的类型。
@requestBody
和@responseBody相反,@requestBody用来接收Json数据的请求
默认情况下,我们发送的content-Type是:application/x-www-form-urlencoded 可以直接用@requestParam接受参数
如果不是content-Type不是application/x-www-form-urlencoded 而是 application/json等(除过application/x-www-form-urlencoded 其他类型)需要用requestBody接受
@RequestMapping("/formJson")
@ResponseBody
public String formJson(@RequestBody User user){
System.out.println(user);
return "success";
}
在一般发送的Ajax请求中,如果有checkbox,要手动进行设置,因为 checkb一般都是数组,选择两个及两个以上的选项没有问题,但选择一个选项时,CheckBox的类型就成是string类型,因此要对它进行手动设置,当时string类型时,将它转成数组类型。
$(function () {
$("#formbtn").click(function () {
//获取表单当中所有的参数发送给服务器
//使用序列化转json插件
var serializeJson = $("#myform").serializeJson();
console.log(serializeJson);
console.log(JSON.stringify(serializeJson));
//Object {username: "aaa", age: "23", hobby: "篮球"}
if( typeof serializeJson.hobby=="string"){
serializeJson.hobby = new Array(serializeJson.hobby);
}
$.ajax({
type:"post",
url:"${pageContext.request.contextPath}/formJson",
data:JSON.stringify(serializeJson),
dataType:'json',
contentType:'application/json',
success:function (data) {
console.log(data)
}
});
});
});
requestBody还可以获取文件信息。