springmvc學習筆記(18)-json數據交互

時間 2019-11-11

標籤 springmvc 學習筆記 json 數據交互欄目 Spring 简体版

原文原文鏈接

springmvc學習筆記(18)-json數據交互

標籤： springmvcjavascript

[TOC]html

本文主要介紹如何在springmvc中進行json數據的交互，先是環境準備和配置，而後分別展現了「輸入json串，輸出是json串」和「輸入key/value，輸出是json串」兩種狀況下的交互前端

springmvc進行json交互

json數據格式在接口調用中、html頁面中較經常使用，json格式比較簡單，解析還比較方便。java

好比：webservice接口，傳輸json數據.jquery

請求json、輸出json，要求請求的是json串，因此在前端頁面中須要將請求的內容轉成json，不太方便。
請求key/value、輸出json。此方法比較經常使用。

環境準備

添加json轉換的依賴

最開始我少了jackson-databind依賴，程序各類報錯。git

<!-- json 轉換-->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.7.2</version>
</dependency>

<dependency>
    <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-mapper-asl</artifactId>
    <version>1.9.13</version>
</dependency>

查看依賴樹github

[INFO] +- com.fasterxml.jackson.core:jackson-databind:jar:2.7.2:compile
[INFO] |  +- com.fasterxml.jackson.core:jackson-annotations:jar:2.7.0:compile
[INFO] |  \- com.fasterxml.jackson.core:jackson-core:jar:2.7.2:compile
[INFO] \- org.codehaus.jackson:jackson-mapper-asl:jar:1.9.13:compile
[INFO]    \- org.codehaus.jackson:jackson-core-asl:jar:1.9.13:compile

配置json轉換器

在註解適配器中加入messageConvertersweb

<!--註解適配器 -->
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
	<property name="messageConverters">
	<list>
	<bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"></bean>
	</list>
	</property>
</bean>

注意：若是使用<mvc:annotation-driven />則不用定義上邊的內容。ajax

json交互測試

顯示兩個按鈕分別測試spring

jsp頁面

<%--
  Created by IntelliJ IDEA.
  User: brian
  Date: 2016/3/7
  Time: 20:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>json交互測試</title>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
        //請求json，輸出是json
        function requestJson(){     省略    }
        //請求key/value，輸出是json
        function responseJson(){    省略    }
    </script>
</head>
<body>
<input type="button" onclick="requestJson()" value="請求json，輸出是json"/>
<input type="button" onclick="responseJson()" value="請求key/value，輸出是json"/>
</body>

controller

@Controller
public class JsonTest {
    省略
}

測試結果

輸入json串，輸出是json串

使用jquery的ajax提交json串，對輸出的json結果進行解析。

jsp頁面

//請求json，輸出是json
function requestJson(){

    $.ajax({
        type:'post',
        url:'${pageContext.request.contextPath }/requestJson.action',
        contentType:'application/json;charset=utf-8',
        //數據格式是json串，商品信息
        data:'{"name":"手機","price":999}',
        success:function(data){//返回json結果
            alert(data);
        }

    });

}

controller

//請求json串(商品信息)，輸出json(商品信息)
//@RequestBody將請求的商品信息的json串轉成itemsCustom對象
//@ResponseBody將itemsCustom轉成json輸出
@RequestMapping("/requestJson")
public @ResponseBody ItemsCustom requestJson(@RequestBody ItemsCustom itemsCustom){

    //@ResponseBody將itemsCustom轉成json輸出
    return itemsCustom;
}

測試結果

能夠看到，request和response的HTTP頭的Content-Type都是application/json;charset=utf-8

輸入key/value，輸出是json串

使用jquery的ajax提交key/value串，對輸出的json結果進行解析

jsp頁面

//請求key/value，輸出是json
function responseJson(){

    $.ajax({
        type:'post',
        url:'${pageContext.request.contextPath }/responseJson.action',
        //請求是key/value這裏不須要指定contentType，由於默認就 是key/value類型
        //contentType:'application/json;charset=utf-8',
        //數據格式是json串，商品信息
        data:'name=手機&price=999',
        success:function(data){//返回json結果
            alert(data.name);
        }

    });

}

controller

//請求key/value，輸出json
@RequestMapping("/responseJson")
public @ResponseBody ItemsCustom responseJson(ItemsCustom itemsCustom){

    //@ResponseBody將itemsCustom轉成json輸出
    return itemsCustom;
}