前端学习笔记(七)前后端数据交互之JSON

雨点打透心脏的1/2处 2022-12-27 07:18 146阅读 0赞

## 什么是JSON ##

json的全英文名字是JavaScript Object Notation ，它是一种JavaScript对象标识法。  
一般而言java中表示常见的对象表示方法有:

Person p = new Person();
    p.setName("张三");
    p.setAge(23);
    p.setGender("男");
    var p = { "name":"李四","age":23,"gender":"女"};

若用js对象表示

var p = { "name":"李四","age":23,"gender":"女"};

json其实就是js对象表示中的一种。json现在多用于存储和交换文本信息的语法进行数据的传输JSON 比 XML 更小、更快，更易解析。

## JSON如何使用 ##

### 语法 ###

#### 总体规则 ####

**数据在名称/值对中**：json数据是由键值对构成的  
**键用引号(单双都行)引起来**，也可以不使用引号  
值得取值类型：

1.  数字（整数或浮点数）
2.  字符串（在双引号中）
3.  逻辑值（true 或 false）
4.  数组（在方括号中） \{“persons”:\[\{\},\{\}\]\}
5.  对象（在花括号中） \{“address”:\{“province”：“浙江”…\}\}
6.  null  
    **数据由逗号分隔**：多个键值对由逗号分隔  
    **花括号保存对象**：使用\{\}定义json 格式  
    **方括号保存数组**：\[\]  
    定义json的若干种方式:

### JSON获取数据 ###

获取单个json对象属性

var person = { "name":"zhangsan",age:23,"gender":true};
    let ps1=person.name;
    var ps2 = person["name"];
    alert(ps2);
    alert(ps1);

获取json数组中对象的属性  
方法一：

方法二：

### JSON 遍历数据 ###

遍历对象:

var person = { "name":"zhangsan",age:23,"gender":true};
        for(let key in person){ 
            //这种获取方式有问题，相当于person.“key”
            alert(key+":"+person[key]);
        }

遍历对象数组

//嵌套格式 {}----->[]
        var persons= { 
            "persons":[
                { "name":"zhangsan",age:23,"gender":true},
                { "name":"lisi",age:23,"gender":true},
                { "name":"wangwu",age:23,"gender":false}
            ]
        };
        var ps1 = persons.persons;
        //alert(ps1);
        for (let i = 0; i < ps1.length; i++) { 
            for(let key in ps1[i]){ 
                //这种获取方式有问题，相当于person.“key”
                alert(key+":"+ps1[i][key]);
            }
        }
        //嵌套格式 []----->{}
        var ps=[
            { "name":"zhangsan",age:23,"gender":true},
            { "name":"lisi",age:23,"gender":true},
            { "name":"wangwu",age:23,"gender":false}
            ];
        for (let i = 0; i < ps.length; i++) { 
            let p = ps[i];
            for(key in p){ 
                alert(key+"-->"+p[key]);
            }
        }

### JSON 和 JAVA对象的相互转换 ###

#### JSON 解析器 ####

常见的JSON解析器  
JsonLib:JSON 官方提供  
Gson: Google公司  
fastJson: Alibaba  
jackson:spring 中内置的一款Json解析器  
由于jackson是与spring内置的json转换工具，下文重点说明jackson的相关方法。

#### JSON—>java ####

1.  导入jackson的相关jar包
2.  创建Jackson核心对象 ObjectMapper
3.  调用ObjectMapper的相关方法进行转换  
    readValue(json字符串数据,Class)

#### java—>JSON ####

使用步骤：

1.  导入jackson的相关jar包
2.  创建Jackson核心对象 ObjectMapper
3.  调用ObjectMapper的相关方法进行转换

```java
    @Test
        public void test05() throws Exception { 
            //1.初始化JSON字符串
            String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";
            //2.创建ObjectMapper对象
            ObjectMapper mapper = new ObjectMapper();
            //3.转换为Java对象 Person对象
            Person person = mapper.readValue(json, Person.class);
            System.out.println(person);
        }

参数1：  
File：将obj对象转换为JSON字符串，并保存到指定的文件中  
Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中  
OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中  
writeValue(参数1，obj):  
writeValueAsString(obj):将对象转为json字符串

2. 注解：
    
    ```java
    1. @JsonIgnore：排除属性。
    2. @JsonFormat：属性值得格式化
     @JsonFormat(pattern = "yyyy-MM-dd")

1.  复杂java对象转换  
    1)List：数组  
    2)Map：对象格式一致

## 校验用户名 ##

服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：

1.  $.get(type):将最后一个参数type指定为"json"
2.  在服务器端设置MIME类型

response.setContentType("application/json;charset=utf-8");

前端代码;

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <script src="js/jquery-1.8.3.min.js"></script>
        <script>
            $(function () { 
                $("#username").blur(function () { 
                    var username = $(this).val();
                    $.get("findUserServlet",{ username:username},function (data) { 
                        let span = $("#s_username");
                        if(data.userExsit){ 
                            span.css("color","red");
                            span.html(data.msg);
                        }else { 
                            span.css("color","green");
                            span.html(data.msg);
                        }
                    },"json");
    
                });
            })
        </script>
    </head>
    <body>
    <form>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <span id="s_username"></span>
        <br>
        <input type="password" name="password" placeholder="请输入密码"><br>
        <input type="submit" value="注册"><br>
    </form>
    </body>
    </html>

后端代码;

@WebServlet("/findUserServlet")
    public class FindUserServlet extends HttpServlet { 
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    
            String username = request.getParameter("username");
            response.setContentType("text/html;charset=utf-8");
            //response.setContentType("application/json;charset=utf-8");
            Map<String, Object> map = new HashMap<>();
            if("tom".equals(username)){ 
                map.put("userExsit",true);
                map.put("msg","此用户太受欢迎更换一个吧......");
            }else{ 
                map.put("userExsit",false);
                map.put("msg","用户名可用");
            }
            ObjectMapper mapper = new ObjectMapper();
            mapper.writeValue(response.getWriter(),map);
        }
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
            this.doPost(request, response);
        }
    }

运行结果：  
![在这里插入图片描述][20201209125523479.png]  
![在这里插入图片描述][20201209125612997.png]

[20201209125523479.png]: /images/20221120/136893f8030f49979d6199f046048f89.png
[20201209125612997.png]: /images/20221120/f4928dce972148d296a0e5ac06d92875.png