java web 之springmvc教程(九)-----与前台的json数据交互

springmvc和前台交互主要有两种形式:

前台传过来的方式有两种，一种是传json格式的数据过来，另一种就是在url的末尾传普通的key/value串过来，针对这两种方式，在controller中会有不同的解析，但是在controller中返回的json格式的数据都是一样的。

1,导入包,pom.xml
 

 <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
      <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-databind</artifactId>
          <version>2.9.6</version>
      </dependency>
      <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
      <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-core</artifactId>
          <version>2.9.6</version>
      </dependency>
      <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations -->
      <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-annotations</artifactId>
          <version>2.9.6</version>
      </dependency>

 2,配置json转换器

配置json转换器有两种方式，如果是配置了注解适配器org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter的话，需要在该适配器中配置json转换器， 如下：

<!-- 用于将对象转换为 JSON  -->  
<bean id="stringConverter"  
    class="org.springframework.http.converter.StringHttpMessageConverter">  
    <property name="supportedMediaTypes">  
        <list>  
            <value>text/plain;charset=UTF-8</value>  
        </list>  
    </property>  
</bean>  
<bean id="jsonConverter"   class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"></bean>  

<bean      class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">  
    <property name="messageConverters">  
        <list>  
            <ref bean="stringConverter" />  
            <ref bean="jsonConverter" />  
        </list>  
    </property>  
</bean>  

如果使用<mvc:annotation-driven />注解驱动的话就不用以上的配置了，默认已经配好了。

3. json交互的测试

3.1 前台传输的是json格式的数据

我们使用jquery的ajax提交json串，对输出的json结果进行解析。前台的程序如下：

//请求json，输出是json
function requestJson(){

    var jsonData = {  
            "name" : "手机",  
            "price" : "999"  
    };
    $.ajax({
        type:'post',
        url:'${pageContext.request.contextPath }/requestJson.action',
        contentType:'application/json;charset=utf-8',//指定为json类型
        //数据格式是json串，商品信息
        data:JSON.stringify(jsonData),
        success:function(data){//返回json结果
            alert(data.name);
        }       
    }); 
}

controller:

//测试请求的是json串(商品信息)，输出json(商品信息)
//@RequestBody将请求的商品信息的json串转成itemsCustom对象
//@ResponseBody将itemsCustom对象转成json输出
@RequestMapping("/requestJson")
public @ResponseBody ItemsCustom requestJson(@RequestBody ItemsCustom itemsCustom) {

    return itemsCustom; //由于@ResponseBody注解，将itemsCustom转成json格式返回
}

由于前台传的是name和price两个属性，所以在后台就用ItemsCustom来接收了，这个类中也有这两个属性。重点是@RequestBody注解，它是将前台传过来的json串穿换成itemsaCustom对象，然后再将该对象return回去，通过@ResponseBody注解将itemsCustom对象转成json格式返回给前台。这样前台接收到了后就可以解析了。

响应的结果，null表示空值而已，这里就返回了原对象，也就只有name和price属性

3.2 前台传输的是key/value格式的数据

 我们还是使用jquery的ajax提交key/value串，对输出的json结果进行解析。前台的程序如下：

//请求key/value，输出是json
    function responseJson(){

        $.ajax({
            type:'post',
            url:'${pageContext.request.contextPath }/responseJson.action',
            //请求是key/value这里不需要指定contentType，因为默认就 是key/value类型
            //数据格式是key/value，商品信息
            data:'name=手机&price=999',
            success:function(data){//返回json结果
                alert(data.name);
            }
        });
    }

因为key/value串不是json格式的，所以controller在接收的时候就不需要@RequestBody的注解了，但是返回到前台的json格式的数据还是需要@ResponseBody注解的，如下：

//测试请求的是key/value(商品信息)，输出json(商品信息)
//@ResponseBody将itemsCustom对象转成json输出
@RequestMapping("/responseJson")
public @ResponseBody ItemsCustom responseJson(ItemsCustom itemsCustom) {

    return itemsCustom; //由于@ResponseBody注解，将itemsCustom转成json格式返回
}