Spring Mvc 与 json 交互

在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,或者必须选中你出错的项目