十四、JSON数据交互_json数据交换

目录

一、JSON数据交互

1、JSON概述

什么是JSON？

JSON有什么特点？

JSON的两种数据结构

1.对象结构

2.数组结构

3.（1、2组合）

2、JSON数据转换

案例

---

一、JSON数据交互

JSON是近几年才流行的一种新的数据格式，它与XML非常相似，都是用于存储数据的;但JSON相对于XML来说，解析速度更快，占用空间更小。因此在实际开发中，使用JSON格式的数据进行前后台的数据交互是很常见的。

1、JSON概述

什么是JSON？

 JSON（JavaScript Object Notation，JS对象标记）是一种轻量级的数据交换格式。它是基于JavaScript的一个子集，使用了C、C++、C#、Java、JavaScript、Perl、Python等其他语言的约定，采用完全独立于编程语言的文本格式来存储和表示数据。

JSON有什么特点？

JSON与XML非常相似，都是用来存储数据的，并且都是基于纯文本的数据格式。与XML相比，JSON解析速度更快，占用空间更小，且易于阅读和编写，同时也易于机器解析和生成。

JSON的两种数据结构

1.对象结构

在对象结构以“{”开始，以“}”结束。中间部分由0个或多个以英文“，”分隔的name:value对构成（注意name和value之间以英文“：”分隔），其存储形式如下图所示。

 对象结构的语法结构代码如下：

例如：一个address对象包含城市、街道、邮编等信息，使用JSON的表示形式如下：            {"city":"Beijing","street":"Xisanqi","postcode":100096}

2.数组结构

数组结构以“[”开始，以“]”结束。中间部分由0个或多个以英文“，”分隔的值的列表组成，其存储形式如下图所示。

 对象结构的语法结构代码如下：

[             value1,             value2,              ... ]

例如，一个数组包含了String、Number、Boolean、null类型数据，使用JSON的表示形式如下：

["abc",12345,false,null]

3.（1、2组合）

对象、数组数据结构也可以分别组合构成更为复杂的数据结构。例如：一个person对象包含name、hobby和address对象，其代码表现形式如下：

{
"name": "zhangsan"
"hobby":["篮球","羽毛球","游泳"]
"address":{
    "city":"Beijing"
    "street":"Xisanqi"
    "postcode":100096
     }

 }

注意：如果使用JSON存储单个数据（如“abc”），一定要使用数组的形式，不要使用Object形式，因为Object形式必须是“名称：值”的形式。

2、JSON数据转换

Spring提供了一个HttpMessageConverter<T>接口来实现浏览器与控制器类（Controller）之间的数据交互。该接口主要用于将请求信息中的数据转换为一个类型为T的对象，并将类型为T的对象绑定到请求方法的参数中，或者将对象转换为响应信息传递给浏览器显示。

HttpMessageConverter<T>接口有很多实现类，这些实现类可以对不同类型的数据进行信息转换。其中MappingJackson2HttpMessageConverter是Spring MVC默认处理JSON格式请求响应的实现类。该实现类利用Jackson开源包读写JSON数据，将Java对象转换为JSON对象和XML文档，同时也可以将JSON对象和XML文档转换为Java对象。

要使用MappingJackson2HttpMessageConverter对数据进行转换，就需要使用Jackson的开源包，开发时所需的开源包及其描述如下所示，下载地址：http://mvnrepository.com/artifact/com.fasterxml.jackson.core

• jackson-annoations-2.8.8.jar：JSON转换注解包；
• jackson-core-2.8.8.jar：JSON转换核心包；
• jackson-databind-2.8.8.jar：JSON转换的数据绑定包。

在使用注解式开发时，需要用到2个重要的JSON格式转换注解，分别为@RequestBody和@ResponseBody，关于这两个注解的说明如下表所示：

案例

( 1)创建项目并导入相关JAR包。使用Eclipse创建一个名为chapter14的Web项目，然后将SpringMVC相关JAR包、JSON 转换包添加到项目的lib目录中，并发布到类路径下。添加后的lib目录如图所示。

 (2)在 web.xml中，对 Spring MVC的前端控制器等信息进行配置，

<?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_3_0.xsd" version="3.0">
  <display-name>chapter11</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  
  <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-config.xml</param-value>
      </init-param>
      <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
      <servlet-name>springmvc</servlet-name>
      <url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>

( 3)在src目录下，创建Spring MVC的核心配置文件springmvc-config.xml，

<?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:aop="http://www.springframework.org/schema/aop"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/aop
        http://www.springframework.org/schema/aop/spring-aop.xsd
        http://www.springframework.org/schema/tx
        http://www.springframework.org/schema/tx/spring-tx.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd">

         <!--定义组件扫描器，指定需要扫描的包-->

        <context:component-scan base-package="com.itheima.controller"/>
        <!--配置注解驱动-->
        <mvc:annotation-driven />

       <!--配置静态资源的访问映射，此配置中的文件,将不被前端控制器拦截-->
        <mvc:resources location="/js/" mapping="/js/**"></mvc:resources>
        <!--配置视图解析器-->
       <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
               <property name="prefix" value="/WEB-INF/jsp/"></property>
               <property name="suffix" value=".jsp"></property>
       </bean>
 </beans>

• location：用于定位需要访问的本地静态资源文件路径，具体到某个文件夹
   
• mapping：匹配静态资源全路径，其中“/**”表示文件夹及其子文件夹下的某个具体文件

注解驱动<mvc:annotation-drivern />和静态资源访问映射<mvc:resources .../>。其中<mvc:annotation-drivern/>配置会自动注册 RequestMappingHandlerMapping 和 RequestMappingHandlerAdapter两个Bean，并提供对读写XML和读写JSON等功能的支持。<mvc:resources.../>元素用于配置静态资源的访问路径。由于在 web.xml 中配置的“/”会将页面中引入的静态文件也进行拦截，而拦截后页面中将找不到这些静态资源文件，这样就会引起页面报错。而增加了静态资源的访问映射配置后,程序会自动地去配置路径下找静态的内容。

( 4)在src目录下，创建一个com.itheima.po包，并在包中创建一个User类，该类用于封装User类型的请求参数,

public class User {
    
    //姓名
    private String username;
    //密码
    private String password;
    
    
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    @Override
    public String toString() {
        return "User [ username=" + username + ", password=" + password + "]";
    }

}

(5)在WebContent目录下，创建页面文件index.jsp来测试JSON数据交互，在测试页面 index.jsp 中使用的是jQuery的AJAX进行的JSON数据提交和响应,所以还需要引入jquery.js文件。本示例是引入了WebContent目录下js文件夹中的jquery-1.11.3.min.js

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试JSON交互</title>
<script type="text/javascript"

        src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js">

</script>

<script type="text/javascript">
    function testJson(){
        //首先获取用户操作的信息
        //获取用户输入的用户名和密码
        var username = $("#username").val();
        var password = $("#password").val();
        $.ajax({
            //请求的url
            url: "${pageContext.request.contextPath}/testJson",
            //请求方式
            type:"post",
            //data发送的数据
            data:JSON.stringify({username:username,password:password}),
            //定义发送请求的数据格式为json
            contentType:"application/json;charset=utf-8",
            //定义回调响应的数据为json字符串，该属性可以省略
            dataType:"json",
            //成功响应的结果
            success:function(data){
                if(data!=null){
                    alert(("您输入的用户名为:"+data.username+
                                "密码为:"+data.password);
                }
            }
        }); 

    }
</script>

</head>
<body>
    <form>
        用户名：<input type="text" name="username" id="username"><br>
        密   码：<input type="password" name="password" id="password"><br>
    <input type="button" value="测试JSON交互" οnclick="testJson()">
    </form>
</body>
</html>

编写了一个测试JSON交互的表单，当单击“测试JSON交互”按钮时，会执行页面中的testJson()函数。在函数中使用了 jQuery 的 AJAX方式将JSON格式的用户名和密码传递到以“/testJson”结尾的请求中。
需要注意的是，在AJAX中包含了3个特别重要的属性,其说明如下。

•  data:即请求时携带的数据，当使用JSON格式时，要注意编写规范。
• contentType:当请求数据为JSON格式时，值必须为application/json。
• dataType:当响应数据为JSON时，可以定义 dataType属性，并且值必须为json。其中dataType : "json"也可以省略不写，页面会自动识别响应的数据格式。

( 6)在src目录下，创建一个com.itheima.controller包，在该包下创建一个用于用户操作的控制器类UserController

@Controller
public class UserController {
    /**
    *接收页面请求的JSON 数据，并返回JSON格式结果

     */
    @RequestMapping("/testJson")
    @ResponseBody //将对象转换成json格式响应
    public User testJson(@RequestBody User user) { //将数据绑定到形参user

        //打印接收的JSON格式数据

        System.out.println (user);

        //返回JSON格式的响应
        return user;
    }
}

方法中的@RequestBody注解用于将前端请求体中的JSON格式数据绑定到形参user上，@ResponseBody注解用于直接返回User对象(当返回POJO对象时，会默认转换为JSON格式数据进行响应)。
(7)将chapter14项目发布到Tomcat 服务器并启动，在浏览器中访问地址http:/localhost:8080/chapter14/index.jsp，其显示效果如图所示。

在两个输入框中分别输入用户名“jack”和密码“123456”后，单击“测试JSON 交互”按钮，当程序正确执行时，页面中会弹出显示用户名和密码的弹出框，如图所示。

与此同时，Eclipse的控制台中也会显示相应数据，如图所示。

显示结果可以看出，编写的代码已经正确实现了JSON数据交互，可以将JSON格式的请求数据转换为方法中的Java对象，也可以将Java对象转换为JSON格式的响应数据。