1. 程式人生 > >【SpringMVC學習07】SpringMVC與前臺的json資料互動

【SpringMVC學習07】SpringMVC與前臺的json資料互動

json資料格式在介面呼叫中、html頁面中比較常用,json格式比較簡單,解析也比較方便,所以使用很普遍。在springmvc中,也支援對json資料的解析和轉換,這篇文章主要總結一下springmvc中如何和前臺互動json資料。

1. 兩種互動形式

 springmvc和前臺互動主要有兩種形式,如下圖所示:

可以看出,前臺傳過來的方式有兩種,一種是傳json格式的資料過來,另一種就是在url的末尾傳普通的key/value串過來,針對這兩種方式,在controller中會有不同的解析,但是在controller中返回的json格式的資料都是一樣的。下面來具體分析一下springmvc是如何與前臺進行json資料的互動的。

2. 環境的準備

2.1 載入json的jar包

springmvc3和springmvc4針對json互動的jar包有區別,我用的是springmvc4,需要匯入如下三個jar包。

2.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>  

但是如果使用註解驅動的話就不用以上的配置了,預設已經配好了。建議使用這種,比較方便。

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屬性

響應的結果,null表示空值而已,這裡就返回了原物件,也就只有name和price屬性

我們還是使用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格式返回
}

測試結果如下: