SpringMVC--JSON数据交互（附带实例）

Bertha 。 2021-08-14 00:28 534阅读 0赞

#### JSON 概述 ####

JSON（JavaScript Object Notation, JS 对象标记）是一种轻量级的数据交换格式。与 XML 一样，JSON 也是基于纯文本的数据格式。它有对象结构和数组结构两种数据结构。

**1）对象结构**  
对象结构以“\{”开始、以“\}”结束，中间部分由 0 个或多个以英文“，”分隔的 key/value 对构成，key 和 value 之间以英文“：”分隔。对象结构的语法结构如下：

{ 
        key1:value1,
        key2:value2,
        ...
    }

其中，key 必须为 String 类型，value 可以是 String、Number、Object、Array 等数据类型。例如，一个 person 对象包含姓名、密码、年龄等信息，使用 JSON 的表示形式如下：

{ 
        "pname":"张三",
        "password":"123456",
        "page":40
    }

**2）数组结构**  
数组结构以“\[”开始、以“\]”结束，中间部分由 0 个或多个以英文“，”分隔的值的列表组成。数组结构的语法结构如下：

{ 
        value1,
        value2,
        ...
    }

上述两种（对象、数组）数据结构也可以分别组合构成更加复杂的数据结构。例如，一个 student 对象包含 sno、sname、hobby 和 college 对象，其 JSON 的表示形式如下：

{ 
        "sno":"201802228888",
        "sname":"张三",
        "hobby":["篮球","足球"]，
        "college":{ 
            "cname":"清华大学",
            "city":"北京"
        }
    }

#### JSON 数据转换 ####

为实现浏览器与控制器类之间的 JSON 数据交互，Spring MVC 提供了 MappingJackson2HttpMessageConverter 实现类默认处理 JSON 格式请求响应。该实现类利用 Jackson 开源包读写 JSON 数据，将 Java 对象转换为 JSON 对象和 XML 文档，同时也可以将 JSON 对象和 XML 文档转换为 Java 对象。

在使用注解开发时需要用到两个重要的 JSON 格式转换注解，分别是 @RequestBody 和 @ResponseBody。

*  @RequestBody：用于将请求体中的数据绑定到方法的形参中，该注解应用在方法的形参上。
 *  @ResponseBody：用于直接返回 return 对象，该注解应用在方法上。

#### JSON 数据转换 ####

在使用注解开发时需要用到两个重要的 JSON 格式转换注解，分别是 @RequestBody 和 @ResponseBody。

#### 示例 ####

**1）创建应用并导入相关 JAR 包**  
![format_png][]  
**2）配置 web.xml**

<?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
      <display-name>SpringMVCForm</display-name>
      
      
        <filter>
            <filter-name>encodingFilter</filter-name>
            <filter-class>
                 org.springframework.web.filter.CharacterEncodingFilter
            </filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
        </filter>
        <filter-mapping>
            <filter-name>encodingFilter</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>
        
        
        <servlet>
    	  	<servlet-name>springmvc</servlet-name>
    	  	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    	  	
    	  	<init-param>
    	  		<param-name>contextConfigLocation</param-name>
    	  		<param-value>classpath:springmvc-servlet.xml</param-value>
    	  	</init-param>
      	</servlet>
      	<servlet-mapping>
      		<servlet-name>springmvc</servlet-name>
      		<url-pattern>*.action</url-pattern>
      	</servlet-mapping>
    </web-app>

**3）配置 Spring MVC 的核心配置文件**

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd">
    
            
            
            
            <context:component-scan base-package="pers.zhang"/>
            
            
            <mvc:annotation-driven/>
            
        	<mvc:resources location="/jsp/" mapping="/jsp/**"/>   
     		<mvc:resources location="/js/" mapping="/js/**"/>    
     		<mvc:resources location="/css/" mapping="/css/**"/>  
            
            
            <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
            	<property name="prefix" value="/WEB-INF/jsp/"/>
            	<property name="suffix" value=".jsp"/>
            </bean>
            
       </beans>

**4）创建 POJO 类**

package pers.zhang.pojo;
    
    public class Person { 
        private String pname;
        private String password;
        private Integer page;
        
    	public String getPname() { 
    		return pname;
    	}
    	public void setPname(String pname) { 
    		this.pname = pname;
    	}
    	public String getPassword() { 
    		return password;
    	}
    	public void setPassword(String password) { 
    		this.password = password;
    	}
    	public Integer getPage() { 
    		return page;
    	}
    	public void setPage(Integer page) { 
    		this.page = page;
    	}
    
    
        
    }

**5）创建 JSP 页面**

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <script type="text/javaScript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <form action="">
            用户名：<input type="text" name="pname" id="pname" /><br> 
            密码：<input type="password" name="password" id="password" /> <br> 
            年龄：<input type="text" name="page" id="page"><br> 
            <input type="button" value="测试" onclick="testJson()" />
        </form>
    </body>
    <script type="text/javaScript">
        function testJson() { 
            //获取输入的值pname为id
            alert($("#pname").val());
            var pname = $("#pname").val();
            var password = $("#password").val();
            var page = $("#page").val();
            $.ajax({ 
                //请求路径
                url : "${pageContext.request.contextPath }/testJson.action",
                //请求类型
                type : "post",
                //data表示发送的数据
                data : JSON.stringify({ 
                    pname : pname,
                    password : password,
                    page : page
                }), //定义发送请求的数据格式为JSON字符串
                contentType : "application/json;charset=utf-8",
                //定义回调响应的数据格式为JSON字符串，该属性可以省略
                dataType : "json",
                //成功响应的结果
                success : function(data) { 
                    if (data != null) { 
                        alert("输入的用户名：" + data.pname + "，密码：" + data.password
                                + "， 年龄：" + data.page);
                    }
                }
            });
        }
    </script>
    </html>

**6）创建控制器类**

package pers.zhang.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import pers.zhang.pojo.Person;
    
    @Controller
    public class TestController { 
        /** * 接收页面请求的JSON参数，并返回JSON格式的结果 */
        @RequestMapping("testJson.action")
        @ResponseBody
        public Person testJson(@RequestBody Person user) { 
            // 打印接收的JSON格式数据
            System.out.println("pname=" + user.getPname() + ",password="
                    + user.getPassword() + ",page=" + user.getPage());
            ;
            // 返回JSON格式的响应
            return user;
        }
    }

**7）运行 index.jsp 页面，测试程序**  
![在这里插入图片描述][20191101170050917.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]

[format_png]: /images/20210813/3ecfacf44fe649af85434ae836c471b2.png
[20191101170050917.png]: /images/20210813/2be741b7912e4e469b14277b72097ac7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/826f6ef1f6fe48bdb6e8550b91687fb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]: /images/20210813/6d80295f98b44b0b828719a8e6fd4e86.png