SpringMVC json数据交互结合RESTful支持

偏执的太偏执、 2022-04-16 03:21 245阅读 0赞

### **本文主要阐述：** ###

SpringMVC json数据交互的过程及其细节

json结合RESTful支持开发小案例

### **json****数据交互** ###

数据交互流程

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70][]

由上述流程交互主要分为两种情况

1.  客户端请求的是json串，输出的是json串；
2.  客户端请求的是key/value,输出的是json串。

### **测试环境搭建** ###

jar包

springmvc用Jackson包下的**@requestBody**和**@responseBody**注解转换json

![20181116110305592.png][]

js链接

提供前端页面转换json串的ajax模板

![20181116110305600.png][]

### **测试结构搭建** ###

在WebRoot下创建js文件夹:引入**jquery-1.4.4.min.js**

在WebRoot下创建测试jsp页面：**JsonTest.jsp**

在cn.ssm.xhchen.controller下创建**JsonController.java**

![20181116110305639.png][]

### **配置json转换器和解析静态资源** ###

转换器

注意：如果适配器交给mvc自动注册就不需要配置转换器

<mvc:annotation-driven ></mvc:annotation-driven>

解析静态资源

<mvc:resources location="/js/" mapping="/js/**"/>

### **测试输入json,输出json** ###

**编写JsonTest.jsp页面**

引入js文件

设置测试按钮

ajxa转换json

函数requestJson()，请求为json串需要指定contentType（application/json）；数据格式为json数据。

// 输入json串，输出json串
    function requestJson() {
    	$.ajax({
    		type:'post',
    		url:'${pageContext.request.contextPath }/json/requestJson.action',
    		contentType:'application/json;charset=utf-8',
    		// json串数据格式
    		data:'{"items_name":"手机","items_price":"998","items_detail":"双摄16G 4G"}',
    		success:function(date){
    		    alert(date.items_price);
    		}
    	});
    }

**创建JsonController.java**

@requestBody 将json串转换为java对象

@responseBody 将java对象转换为json串输出

// @RequestBody 把请求商品信息的json串转换为ItemsCustomer对象
    // @ResponseBody 将ItemsCustomer对象转换为json串输出
    @RequestMapping("/requestJson")
    public @ResponseBody ItemsCustomer requestJson(@RequestBody ItemsCustomer itemsCustomer) {
    		
        // 一系列数据操作...
    		
        return itemsCustomer;
    
    }

### **测试结果** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 1][]

请求头信息

content-Type：application/json;charsetset=utf-8

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 2][]

响应头信息

content-Type：application/json;charsetset=utf-8

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 3][]

请求json的串

![20181116110305749.png][]

响应的json数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 3][]

### **测试输入key/value,输出json** ###

**编写JsonTest.jsp页面**

设置测试按钮

ajxa转换json

函数responseJson()，请求为key/value不需要指定contentType，因为默认为key/value类型；数据格式为key/value。

// 输入key/value，输出json串
    function responseJson() {
    	$.ajax({
    		type:'post',
    		url:'${pageContext.request.contextPath }/json/responseJson.action',
    		/* contentType:'application/json;charset=utf-8', */
    		// key/value数据格式
    		data:'items_name=手机&items_price=998&items_detail=双摄16G 4G',
    		success:function(date){
    		    alert(date);
    		}
    	});
    }

**创建JsonController.java**

不需要@requestBody将json串转为java对象

@responseBody 将java对象转换为json串输出

@RequestMapping("/responseJson")
    public @ResponseBody ItemsCustomer responseJson(ItemsCustomer itemsCustomer) {
    		
        // 一系列数据操作...
    		
        return itemsCustomer;
    }

### **测试结果** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 4][]

请求头信息

content-Type：application/x-www-from-urlencoded（key/value）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 5][]

响应头信息

content-Type：application/json;charsetset=utf-8

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 6][]

请求json的串

![20181116110305974.png][]

响应的json数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 7][]

综上可知，请求json，输出json需要在前端进行json转换，不方便，所以不常用；请求key/value，输出json则与其相反，较为常用。

### **json****结合RESTful** ###

**在案例开始前先了解一下什么是RESTful支持?**

RESTful架构，就是目前最流行的一种互联网软件架构，一个开发理念，是对http很好的诠释。它结构清晰、符合标准、易于理解、扩展方便，得到越来越多网站的采用。

**主要包括以下3个功能：**

1、对url进行规范，写RESTful格式的url

非REST的url：http://...../queryItems.action?id=001&type=T01

REST的url：http://..../items/001  url简洁，将参数通过url传到服务端

2、http的方法规范

不管是删除、添加、更新等使用url是一致的，如果进行删除，需要设置http的方法为delete，同理添设置。后台controller方法：判断http方法，如果是delete方法执行删除，同理处理。

3、对http的contentType规范

请求时指定contentType，要json数据，设置成json格式的type。

**案例需求**

查询商品信息，返回json数据。

**编写controller**

url映射使用RESTful风格的url，将查询商品信息的id传入controller。通过@ReeponseBody把java对象输出json。

// /itemsView/{id} {xxx}占位符
    // @PathVariable 获取占位符中的参数，把模板变量映射到方法的形参中
    // @PathVariable("id") 指定占位符与形参一致，如果名字一致可以不用指定
    @RequestMapping("/itemsView/{id}")
    public @ResponseBody ItemsCustomer itemsView(@PathVariable("id") Integer id) throws Exception {
    		
        // 调用itemsService方法查询
        ItemsCustomer itemsCustomer = itemsService.findItemsById(id);
    		
        return itemsCustomer;
    }

/itemsView/\{id\} \{xxx\}占位符。

@PathVariable 获取占位符中的参数，把模板变量映射到方法的形参中。

@PathVariable("id") 指定占位符与形参一致，如果@RequestMapping中占位名字和形参一致可以不用指定。

**前端控制器配置**

Web.xml下配置RESTful的前端控制器

<servlet>
        <servlet-name>spring_rest</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    
        
        <init-param>
    	<param-name>contextConfigLocation</param-name>
    	<param-value>classpath:spring/springmvc.xml</param-value>
        </init-param>
    </servlet>
    
    <servlet-mapping>
        <servlet-name>spring_rest</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

### **测试案例一** ###

[http://localhost:8080/ssm/json/itemsView/1][http_localhost_8080_ssm_json_itemsView_1]

请求的json数据

![2018111611030649.png][]

响应json数据

![2018111611030672.png][]

### **测试案例二** ###

**编写JsonTest.jsp页面**

设置测试按钮

ajxa转换json

函数itemsView ()，请求为json串需要指定contentType（application/json;charset=utf-8）；数据格式为json数据。

// 根据id查询商品
    function itemsView() {
    	$.ajax({
    		type:'post',
    		url:'${pageContext.request.contextPath}/json/itemsView/1.action',
    		contentType:'application/json;charset=utf-8',
    		success:function(date){
    		    alert(date.items_price);
    		}
            });
    }

### **测试结果** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 8][]

请求头信息

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 9][]

响应头信息

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 10][]

请求的json数据

![20181116110306216.png][]

响应的json数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 11][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70]: /images/20220416/3c0399a89f434c95a95b1e231765e12c.png
[20181116110305592.png]: /images/20220416/7e1d56740ef6403cadd2bfa0bc956678.png
[20181116110305600.png]: /images/20220416/cfde012916ea4353bcd19b778b0fc41f.png
[20181116110305639.png]: /images/20220416/9336d31cbc9245029b61902713ac8527.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 1]: /images/20220416/a5c07afcff1b4de9afa6ba0f909a51cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 2]: /images/20220416/bf51c9f8918d47ff85d3aeee83393279.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 3]: /images/20220416/fdd910ea79a84ecbb765e32225c1f9a7.png
[20181116110305749.png]: /images/20220416/cf75ccfbafbe4c14aecd899e366f55eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 4]: /images/20220416/b7bf4177a1bd4b7a9f3c8e0fe9641ff3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 5]: /images/20220416/f453c604893f4f118675f5509dc3c866.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 6]: /images/20220416/a9dfcb269aa44c37bfcdadce16454ec5.png
[20181116110305974.png]: /images/20220416/492c6824d5c8452b93d823fad8e3981c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 7]: /images/20220416/00ed972b0cc945d1810cd0f435c8795d.png
[http_localhost_8080_ssm_json_itemsView_1]: http://localhost:8080/ssm/json/itemsView/1
[2018111611030649.png]: /images/20220416/f9e0cf6454e54149a3cb61f41ddf3e0b.png
[2018111611030672.png]: /images/20220416/94d4857bf840482099f80fb39c23d6dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 8]: /images/20220416/c78077acbe9043708f169cc71dd506ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 9]: /images/20220416/769822db73b04bb8a346b5c93c1a87c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 10]: /images/20220416/95e2c3d494374527975fd55feef0fb80.png
[20181116110306216.png]: /images/20220416/741ed9df653b4b66a64558b71481aed4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTMxOTQ5_size_16_color_FFFFFF_t_70 11]: /images/20220416/5d7238360203422bbcba5669450955f2.png