软件架构技术(Java)之JSON数据交互

一、JSON概述

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

JSON是基于纯文本的数据格式，用来存储数据，解析速度快，占用空间小，易于阅读和编写。

二、JSON数据格式

（一）对象结构

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

例如：一个address对象包含城市、街道、邮编等信息，使用JSON的表示形式如下：

  {"city":"Beijing","street":"Xisanqi","postcode":100096}

（二）数组结构

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

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

    ["abc",12345,false,null]

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

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

三、JSON数据转换

（一）简介

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

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

（二）使用注解实现JSON数据转换

使用注解实现JSON数据转换时，需要用到2个重要的JSON格式转换注解，分别为@RequestBody和@ResponseBody：

1、在pom.xml文件中添加依赖（Jackson）

<!--jackson jar包-->    <dependency>      <groupId>com.fasterxml.jackson.core</groupId>      <artifactId>jackson-core</artifactId>      <version>2.9.2</version>    </dependency>    <dependency>      <groupId>com.fasterxml.jackson.core</groupId>      <artifactId>jackson-databind</artifactId>      <version>2.9.2</version>    </dependency>    <dependency>     <groupId>com.fasterxml.jackson.core</groupId>      <artifactId>jackson-annotations</artifactId>      <version>2.9.0</version>    </dependency>

2、在项目中导入JQuery文件（jquery-3.6.1.js）

在项目的/webapp文件夹下创建名称为js的文件夹，在js文件夹中导入jQuery文件。

3、在spring-mvc.xml文件中配置静态资源

<!--配置静态资源的访问映射，此配置中的文件，将不被前端控制器拦截 -->    <mvc:resourcesmapping="/js/**"location="/js/" />

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

4、创建一个用户登录页面jsoninput.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>jsoninput</title>    <!--链入外部js文件-->    <scripttype="text/javascript"src="../js/jquery-3.6.1.js"></script></head><body>    <div>        <table>            <tr>                <td>账号：</td>                <td><inputtype="text"id="uaccount"></td>            </tr>            <tr>                <td>密码：</td>                <td><inputtype="password"id="upassword"></td>            </tr>        </table>        <buttonid="save">保存</button>        <div>            回显输入的账号：<spanid="iaccount"></span>        </div>    </div></body><!--写js代码--><scripttype="text/javascript">    // 监听保存按钮    $("#save").click(function() {        console.log("点击事件触发...");        // 获取输入的账号、密码        var uaccount = $("#uaccount").val();        var upassword = $("#upassword").val();        console.log(uaccount);        console.log(upassword);        // 构建JSON数据(对象)        var jsonData = {            "uaccount":uaccount,            "upassword":upassword,        }        // 通过异步请求将数据传输给后端        $.ajax({            url: "http://localhost:8080/json/getJSON",  // 请求地址            type: "POST",                          // 请求方式：GET/POST/PUT/DELETE            contentType: "application/json;charset=UTF-8",            data: JSON.stringify(jsonData),        // 发送到服务器的数据            dataType: "json",                     // 预期返回的数据类型：json, xml, html, text, script            success: function(response) {         // 成功回调                console.log("成功:", response);                console.log("account : " , response.inputData.uaccount);                $("#iaccount").text(response.inputData.uaccount);            },            error: function(xhr, status, error) { // 失败回调                console.log("失败:", error);            },            complete: function() {                // 无论成功失败都执行                console.log("请求完成");            }        });    });</script></html>

5、创建JSONController.java类（控制器）

import com.nsu.model.Account;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import java.util.HashMap;import java.util.Map;/** * JSON数据模拟 */@Controller@RequestMapping("/json")public class JSONController {    /**     * 接收前端异步请求发送的json数据     * @RequestBody:将json数据转为java对象     * @ResponseBody：将java对象转为json数据     */    @ResponseBody    @PostMapping("/getJSON")    public Object getJSON(@RequestBody Account account){        System.out.println("uaccount = "+ account.getUaccount());        System.out.println("upassword = "+ account.getUpassword());        Map<String ,Object> map = new HashMap<String, Object>();        map.put("msg","success");        map.put("inputData",account);        return map;    }}

仅用于交流学习！