前台js代码如下:
<!--页脚结束-->
<script type="text/javascript">
// 页面初始化时加载用户数据
$(document).ready(function() {
// 将请求提交到哪里
var url = "../user/info.do";
// 发出ajax请求,并处理结果
$.ajax({
"url": url,
"type": "POST",// 请求方式
"dataType": "json",// 数据类型
"success": function(json) {
var user = json.data;// 请求成功后,获取后台返回的数据
$("#username").val(user.username);
$("#phone").val(user.phone);
$("#email").val(user.email);
if (user.gender == 0) {
$("#gender-female").attr("checked", "checked");
}
if (user.gender == 1) {
$("#gender-male").attr("checked", "checked");
}
}
});
});
// 为修改按钮绑定单击事件
$("#btn-change").click(function() {
// 将请求提交到哪里
var url = "../user/change_info.do";
// 将表单序列化后,传数据到后台
var data = $("#form-change-info").serialize();
console.log("修改个人资料参数:" + data);
// 发出ajax请求,并处理结果
$.ajax({
"url": url,
"data": data,
"type": "POST",
"dataType": "json",
"success": function(json) {
if (json.state == 200) {
alert("修改成功!");
} else {
alert(json.message);
}
},
"error": function(xhr, text, errorThrown) {// 发生错误执行的方法
console.log("xhr.status=" + xhr.status);
alert("您的登录信息已经过期!请重新登录!");
location.href = "login.html";
}
});
});
</script>
后台Controller代码如下:
@RequestMapping("/info.do")
@ResponseBody// 将数据自动转换成指定的格式(这里是json格式),然后返回给前台
public ResponseResult<User> getInfo(
HttpSession session) {
// 获取当前登录的用户的id
Integer id = getUidFromSession(session);
// 执行查询,获取用户数据
User user = userService.getById(id);
// 返回
return new ResponseResult<User>(SUCCESS, user);
}
@PostMapping("/change_info.do")
public ResponseResult<Void> changeInfo(User user, HttpSession session) {
// 获取当前登录的用户的id
Integer id = getUidFromSession(session);
// 将id封装到参数user中,因为user是用户提交的数据,并不包含id
user.setId(id);
// 执行修改
userService.changeInfo(user);
// 返回
return new ResponseResult<>(SUCCESS);
}
**
- 下面是一些容易混乱的地方:
**
springMvc中前台ajax传json数据后台controller接受对象为null
一般地,出现这种情况很大一部分原因是对ajax中的参数作用不熟悉或者对@RequestBody注解不熟悉。
在jquery的ajax中,如果没加contentType:“application/json”,那么data就应该对应的是json对象,反之,如果加了contentType:“application/json”,那么ajax发送的就必须是字符串。为什么呢?contentType参数指定的是浏览器将发送什么样类型的编码,比如
text/html : HTML格式
text/plain :纯文本格式
text/xml : XML格式
mage/gif :gif图片
image/jpeg :jpg图片格式
image/png:png图片格式
application/json :json数据格式
application/pdf :pdf格式
application/octet-stream : 二进制流数据
等等。。。
而你不指定contentType则代表为默认的application/x-www-form-urlencoded(表单)类型,这种类型有一个好处,它可以支持很多种情况,并能配合查询字符串(key1=value1&key2=vlaue2)的形式发送到服务器。而且这种默认类型可以很好地配合参数processData(默认为true,可以不用管他),该参数为true的时候,开启自动转化功能,只要是一个合法对象,都能将该对象自动地转化成查询字符串的形式。所以,在contentType默认的情况下(即不写),ajax里的data参数既可以这么传:
$.ajax({
url:"http://xxxxxx",
data: { "username" : "ccc" } , //查询字符串的映射形式(即对象),在默认模式下提交时会自动地转化成查询字符串
.....
});
也可以这么传:
$.ajax({
url:"http://xxxxxx",
data: "username=ccc", //查询字符串形式
.....
});
所以看到这里,差不多也能知道为什么指定了contentType : "application/json"后,data就只能是字符串而且必须是json字符串了,首先你指定json格式,那提交格式肯定与json有关,再一个,因为你指定了"application/json"就意味着你放弃了"application/x-www-form-urlencoded"这种默认模式,默认模式虽可以自动地转化对象,不见得"application/json"这种格式就会自动帮你转,而事实证明,它确实不会帮你自动转。
下面便是两种犯错的例子:
1>前台ajax多加了contentType:“application/json”,data却错传成json对象:
后台处理:(employee该pojo对象里有username和password等String字段)
结果都为null
将contentType去掉后,
后台成功反射出对象:
2>ajax中没加contentType:“application/json”,data却直接使用了json字符串(和上面的一个道理)
后台情况:
有人就会说,去掉“application/json” 后的默认模式应该是支持字符串和对象的啊,是的,默认模式确实是可以支持两者,但是要看清楚,默认默认支持的字符串是什么?是json字符串吗?不!是查询字符串。
那么如何在application/json这种非默认模式下让Mvc后台接收到收据呢?这里就需要用到@RequestBody注解了,很巧,这个注解就是专门用来处理非默认模式下的请求的。如果上图加了"application/json"那么controller就应该这么接收:
@RequestMapping(“xxx”)
…
public String test(@RequestBody Employee employee) {
…
}
3>第三点是真的有点恶心的一点,找了好久才找到。。
那就是 有些 关键的属性在Mvc层中反射失败,会导致其他所有属性都为null
比如上面的joindate对应的pojo是Date,本来input框里的值是 Thu Dec 30 00:00:00 CST 1999 ,传到后台用Date接收,但是显然格式不对,于是Date合成出了错,然后坑爹的就来了,因为这个特殊的属性反射失败,Mvc层就将请求打回去然后导致浏览器报错400 bad request ,从而导致其他所有属性都为null。最后把joindate属性注释掉,后台什么属性的值都收到了。。
希望能够帮到大家!
补充:在"application/json"的时候,ajax请求对跨域支持似乎不好,默认模式下的ajax成功跨域请求一旦改成了"application/json"就会报跨域请求的错