JavaWeb-Ajax-Axios

JSON-概述

什么是JSON?

JSON(JavaScript Object Notation),JS 对象标记,是一种轻量级别的数据交换格式.它基于ECMAScript(w3c) 制定的js 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON 成为理想的数据交换语言,易于人阅读和编写,同时也易于机器解析和生成。并有效地提升网络传输效率。

FastJSON

  • FastJson 是一个Java 库,可以将Java 对象转换为JSON 格式,当然它也可以将JSON 字符串转换为Java 对象

  • 提供了toJSONString() 和parseObject() 方法来将Java 对象与JSON 相互转换

    • 调用toJSONString() 方法即可将对象转换成JSON 字符串
    • parseObject 方法则反过来将JSON 字符串转换成对象

  • 使用toJSONString

    • 添加maven 依赖 

      1
      2
      3
      4
      5
      6
      		 
      <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
      <dependency>
          <groupId>com.alibaba</groupId>
          <artifactId>fastjson</artifactId>
          <version>1.2.78</version>
      </dependency>

    • 使用测试

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      		 
      实体类:
      	public class Users {
          private int uid; // 用户实体的主键属性
          private String uname; // 用户账号
          private String upassword; // 用户密码
          private String uemail; // 用户邮箱 用于激活使用
          private String usex; // 用户性别
          private int ustatus; // 用户激活状态 0 未激活 1 激活
          private String ucode; // 邮件激活码
          private int urole; // 用户 0 管理员 1
          // JavaBean...
          }

      单元测试:
      	@Test
          public void testFastJson() {
              Users users = new Users(2022, "coderitl", "coderitl", "123xxx@qq.com", "男", 1, "2022", 2);
              // 将实体类转换为 json 格式
              String strToJsonUser = JSON.toJSONString(users);
              System.out.println(strToJsonUser);
          }

    • 输出

      JSON格式在线校验
      JSON格式在线校验

    • 测试

      1
      2
      3
      4
      5
      6
      		 
      @Test
      public void testFastJsonStrToEntity() {
              String message = "{\"ucode\":\"2022\",\"uemail\":\"123xxx@qq.com\",\"uid\":2022,\"uname\":\"coderitl\",\"upassword\":\"coderitl\",\"urole\":2,\"usex\":\"男\",\"ustatus\":1}\n";
              Users users = JSON.parseObject(message, Users.class);
              System.out.println(users);
          }

    • 输出

      1
      		 
      Users{uid=2022, uname='coderitl', upassword='coderitl', uemail='123xxx@qq.com', usex='男', ustatus=1, ucode='2022', urole=2}
Jackson解析

  • Jackson 是一个能否将Java 对象序列化为JSON 字符串,也能够将JSON 字符串反序列化为Java 对象的框架

  • 通过方法readvalue 和writeValue 实现

  • 使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    		 
    <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-annotations</artifactId>
        <version>2.13.0</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-core</artifactId>
        <version>2.13.0</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.13.0</version>
    </dependency>

    • 测试

      1
      2
      3
      4
      5
      6
      7
      		 
      @Test
        public void testJackSon() throws JsonProcessingException {
            ObjectMapper mapper = new ObjectMapper();
            Users users = new Users(2022, "coderitl", "coderitl", "123xxx@qq.com", "男", 1, "2022", 2);
            String s = mapper.writeValueAsString("testJackSon: "+users);
            System.out.println(s);
        }

    • 输出

      JackSON检验
      JackSON检验

    • 测试

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      		 
      @Test
          public void testJackSon() throws JsonProcessingException {
              ObjectMapper mapper = new ObjectMapper();
              // JSON 字符串
              String message = "{\n" +
                      "\t\"uid\": 2022,\n" +
                      "\t\"uname\": \"coderitl\",\n" +
                      "\t\"upassword\": \"coderitl\",\n" +
                      "\t\"uemail\": \"123xxx@qq.com\",\n" +
                      "\t\"usex\": \"男\",\n" +
                      "\t\"ustatus\": 1,\n" +
                      "\t\"ucode\": \"2022\",\n" +
                      "\t\"urole\": 2\n" +
                      "}";
              Users users = mapper.readValue(message, Users.class);
              System.out.println(users);
          }

    • 输出

浏览器处理JSON

  • 测试

    1
    2
    3
    4
    5
    6
    7
    8
    9
    		 
    // 对象
    const obj = {name: "coder-itl", age: 20, address: "testJson"};
    console.log(typeof (obj)); // object
    // 将浏览器对象转换为字符串方法
    let res = JSON.stringify(obj);
    console.log(typeof (res)); // String
    // 将字符串转换为 Object
    res = JSON.parse(res);
    console.log(typeof (res)); // object

  • 浏览器处理json 字符串

    JSON.stringigy()

  • 浏览器转换为JSON 对象

    JSON.parse

什么Ajax

  • Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
  • Ajax==Asyncchronous 异步JavaScript and XML
  • Ajax 是一种用于创建快速动态网页的技术
  • 使用Ajax 发起异步请求

GET请求

  • servlet

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    		 
    package com.coderitl.bookshop.controller;
    ...
    @WebServlet(name = "data", value = "/data")
    public class data extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            String message = "{'name':'coder-itl'}";
            // 向外发送数据
            PrintWriter writerStream = response.getWriter();
            writerStream.write(message);
            writerStream.flush();
            writerStream.close();
        }
    }

    		 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<%--
  Created by IntelliJ IDEA.
  User: coder-itl
  Date: 2022/2/6
  Time: 10:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        .res {
            width: 600px;
            height: 200px;
            line-height: 200px;
            border: 1px solid skyblue;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div>
    <button id="btn">  填充数据 </button>
    <div class="res"></div>
    <script>
        // 获取按钮
        const btn = document.querySelector("#btn");
        // 获取 div
        const res = document.querySelector(".res");
        // 对按钮绑定点击事件
        btn.onclick = function () {
            // 获取对象
            let xhr = new XMLHttpRequest();
            // get 请求，请求地址为 /data
            xhr.open("get", "data");
            // 发送请求
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 获取成功后的数据并展示
                    res.innerHTML = xhr.responseText;
                }
            };
        }

    </script>
</div>
</body>
</html>

Ajax异步请求测试

POST请求 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 

package com.coderitl.bookshop.controller;
...
@WebServlet(name = "data", value = "/data")
public class data extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 获取
        String name = req.getParameter("name");
        String age = req.getParameter("age");
        String message = "码农是: " + name + ", 年龄是: " + age;
        // 向外发送数据
        PrintWriter writerStream = resp.getWriter();
        writerStream.write(message);
        writerStream.flush();
        writerStream.close();
    }
}

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
const btn = document.querySelector("#btn");
const res = document.querySelector(".res");
btn.onclick = function () {
    let xhr = new XMLHttpRequest();
    // 修改为 post
    xhr.open("post", "data");
    // 设置请求头
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
    // 发送数据
    xhr.send("name=coder-itl&age=18");
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            res.innerHTML = xhr.responseText;
        }
    };
}

POST-输出

省级联动实战 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
-- 创建数据库
create database Provinces;

-- 使用数据库 
use Provinces;

-- 床架表
create table province
(
    -- 编号
    id        int not null primary key auto_increment,
    -- 名称
    name      varchar(20),
    -- 简称
    jiancheng varchar(10),
    -- 省会
    shenghui  varchar(20)
) default character set utf8;


insert into province values (1, '河北', '冀(ji)', '石家庄');
insert into province values (2, '山西', '晋', '太原市');
insert into province values (3, '内蒙古', '蒙', '呼和浩特市');
insert into province values (4, '辽宁', '辽', '沈阳');
insert into province values (5, '江苏', '苏', '沈阳');
insert into province values (6, '浙江', '浙', '杭州');
insert into province values (7, '安徽', '皖(wan)', '合肥');
insert into province values (8, '福建', '闽(min)', '福州');
insert into province values (9, '江西', '赣(gan)', '石家庄');

  • 获取json 数据

    模拟请求、获取JSON数据

  • 测试输出

    实现三级联动