在web开发中,如果想做页面局部刷新的功能,那么使用ajax最合适不过了。在spring mvc逐渐替代struts框架的今天,掌握spring mvc和json的数据交互式很有必要的。
ajax与后台的数据交互格式有好几种,本文主要讲解以ajax以json格式和key/value键值对的方式向后台发送数据,返回的是json格式的数据,以便于前端对数据的解析。两种格式的后台处理过程如下。
两者的区别是:如果使用的json格式,那么在controller对应的方法参数加@RequestBody注解,这个注解能够把json串转为javabean对象。如果是key/value格式,那么不需要@RequestBody注解,因为传过来的键值对spring mvc自动装配成bean。
1.现在来搭建实验环境,在jsp页面中,需要加载jquery库,因为jquery对ajax的封装,很方便操作。这里我直接用微软的cdn了,只需要在jsp页面的head标签中引入jquery就行了。
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
- 1
2.在jsp页面创建一个button按钮,并当我们点击这个按钮时,触发ajax请求函数。
<button onclick="requestJson()">发送Json请求</button><br />
- 1
处理ajax请求的函数如下:
function requestJson() {
$.ajax({
type : "post",
url : "${pageContext.request.contextPath}/testJson/requestJson",
contentType : "application/json;charset=utf-8",
//数据格式是json串,传进一个person
data : '{"userName" : "shizongger","gender" : "male"}',
success:function(data){
console.log("服务器处理后的用户名是:" + data.userName);
console.log("服务器处理后的性别是:" + data.gender);
}
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
上诉参数的各自含义是:
type:http请求的方式,据说http请求方式有6种方式,但是一般开发中用的最多的就是post和get这两种方式。
url:请求的url地址,就是我们要访问的cotroller映射的地址。
contentType:这里要特别注意这个问题,如果是key/value值,那么这个请求的值应该是: “application/x-www-form-urlencoded/charset=utf-8“,而默认值就是这个值,可以不用写。如果是json格式的话,应该是:”application/json;charset=utf-8“,这里必须写对。
3.引入spring mvc需要的jar包,主要是两个jar包,分别是:jackson-core-asl-x.x.xx.jar和jackson-mapper-asl-x.x.xx.jar。如果你不是一个maven项目,那么首先将jar包下载下来,然后把这两个包放进lib文件夹。如果你是一个maven项目,那么它的依赖文件如下:
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-core-asl</artifactId>
<version>1.9.13</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.13</version>
</dependency>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
4.在spring mvc的注解配置器中中加入messageConenters。
<mvc:annotation-driven />
5.写controller的处理方法。
/**
*
* @param person RequestBody注解将json串转为javabean person
* @return 返回javabean person,ResponseBody将javabean转为json返回到客户端
*/
@RequestMapping("/requestJson")
public @ResponseBody Person requestJson(@RequestBody Person p) {
System.out.println("json传来的串是:" + p.getGender() + " " + p.getUserName() + " " + p.isAdalt());
p.setUserName(p.getUserName().toUpperCase());
return p;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
上述的Person javabean定义为:
public class Person {
/*
* 姓名
*/
private String userName;
/**
* 性别
*/
private String gender;
/*
* 是否成年,测试json是否能够传递boolean值
*/
private boolean adalt;
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public boolean isAdalt() {
return adalt;
}
public void setAdalt(boolean adalt) {
this.adalt = adalt;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
将项目运行起来,在浏览器控制输出结果如下:
服务器处理后的用户名是:SHIZONGGER
服务器处理后的性别是:male
- 1
- 2
服务器后台输出结果如下:
json传来的串是:male shizongger false
- 1
这里我在服务器只做了一个处理,就是将前端传递过来的用户名转换为大写,再将其返回。
下面是处理key/value键值对的情形。
function responseJson() {
console.log("b");
$.ajax({
type : 'post',
url : '${pageContext.request.contextPath}/testJson/responseJson',
data : 'userName="JAVA程序员"&gender="男"&male="true"',
success : function(data) {
console.log("服务器处理后的用户名是:" + data.userName);
console.log("服务器处理后的性别是:" + data.gender);
}
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
@RequestMapping("/responseJson")
public @ResponseBody Person responseJson(Person p) {
System.out.println("json传来的串是:" + p.getGender() + " " + p.getUserName() + " " + p.isAdalt());
p.setUserName(p.getUserName().toUpperCase());
return p;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
两者的区别是:
1,在ajax请求中,json需要些contentType,而key/value不需要。
2,在controller处理器中,json需求@RequestBody注解才能将json串转为person对象,而key/value不需要。
一般而言,key/value请求比json请求简单,所以前者使用的较多,而controller返回给前端的参数格式,一般都是json。
如果你在搭建环境是出错,可能有以下原因:
1.浏览器返回状态吗:415 Unsupported Media Type
原因是你可能忘记在配置文件里加入这句话:< mvc:annotation-driven />,或者jar包没有引入进去,又或者,你的json格式数据写错了。
2.eclipse报错:D:\JavaProgram\userysys-v2.0\target\m2e-wtp\web-resources\META-INF\MANIFEST.MF (系统找不到指定的路径。)
解决办法:点击eclipse的project->clean->Clean all projects或者Clean projects below,或者必须选中你出错的项目