• day33-JSON&Ajax01


    JSON&Ajax01

    1. JSON 在线文档

    2. AJAX 在线文档

    1.JSON介绍

    1. JSON指的是JavaScript对象表示法( JavaScript Object Notation),JSON的本质仍然是JavaScript对象

    2. JSON是轻量级的文本数据交互格式,也是前后端进行数据通讯的一种格式:

      image-20221206160402814
    3. JSON独立于语言,即java,PHP,asp.net,go等都可以使用json

    4. JSON具有自我描述性,更易理解。一句话,JSON很好用。

    2.JSON快速入门

    2.1JSON的定义格式

    var 变量名 = {
    "k1":value,//Number类型
    "k2":"str",//字符串类型
    "k3":[],//数组类型
    "k4":{},//json对象类型
    "k5":[{},{}]//json数组
    };

    例子:

    var myJson = {
    "key1":1234,//Number类型
    "key2":"Hello",//字符串类型
    "key3":[1,"he llo",2.3],//数组类型
    "key4":{"age":12,"name":"jack"},//json对象类型
    "key5":[ //json数组
    {"k1":10,"k2":"milan"},
    {"k3":30,"k4":"smith"}
    ]};

    2.2格式规则

    k-v形式,然后v中又可以嵌套k-v,并且每对k-v之间用逗号隔开

    1. 映射(元素/属性)用冒号:表示,"名称":值,注意名称是字符串,因此要用双引号括起来
    2. 并列的数据之间用逗号,分隔,如"名称1":值,"名称2":值
    3. 映射的集合(对象)用大括号{}表示,如{"名称1":值,"名称2":值}
    4. 并列数据的集合(数组)用方括号[]表示,如[{"名称1":值,"名称2":值},{"名称1":值,"名称2":值}]
    5. 元素值类型:string,number,object,array,true,false,null

    2.3入门案例

    html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>json快速入门案例title>
    <script type="text/javascript">
    window.onload = function () {
    /**
    * myJson 就是一个json对象
    */
    var myJson = {
    "key1": 1234,//Number类型
    "key2": "Hello",//字符串类型
    "key3": [1, "hello", 2.3],//数组类型
    "key4": {"age": 12, "name": "jack"},//json对象
    "key5": [ //json数组
    {"k1": 10, "k2": "milan"},
    {"k3": 30, "k4": "smith"}
    ]
    };
    // 演示如何获取到json对象的各个属性/key
    // 1.取出key1
    console.log("key1= ", myJson.key1);
    // 2.取出key3
    //这里使用逗号来避免myJson.key3变成字符串
    console.log("key3= ", myJson.key3);
    // 可以对key3取出的值(array)遍历
    for (var i = 0; i < myJson.key3.length; i++) {
    //使用下标取出数组的值
    console.log("第%i个元素的值= ", i, myJson.key3[i]);
    }
    //3.取出key4
    console.log("key4= ", myJson.key4)
    console.log("key4.name= ", myJson.key4.name)
    //4.取出key5
    console.log("key5= ", myJson.key5)
    console.log("取出key5的第二个数组的key4值= ", myJson.key5[1].k4)
    }
    script>
    head>
    <body>
    <h1>json快速入门案例h1>
    body>
    html>

    打开浏览器控制台,输出如下:

    image-20221206164934066 image-20221206165004253

    3.JSON对象和字符串对象转换

    1. JSON.stringify(json):将一个json对象转换成为json字符串

    2. JSON.parse(jsonString):将一个json字符串转换成为json对象

      转换前提是传入的字符串的格式必须满足json格式

    3.1应用实例

    html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>JSON对象和字符串对象转换title>
    <script type="text/javascript">
    window.onload = function () {
    //解读JSON
    //1.JSON是一个js的内置对象(build-in),可以直接使用,不需要创建
    console.log(JSON);
    //演示如何将一个JSON对象转成-->String
    var jsonPerson = {
    "name": "jack",
    "age": 23
    }
    console.log("jsonPerson= ", jsonPerson, " jsonPerson类型= ", typeof jsonPerson);
    var strPerson = JSON.stringify(jsonPerson);
    console.log("strPerson= ", strPerson, " strPerson类型= ", typeof strPerson);
    //演示如何将一个String对象转成-->JSON
    //注意转成json对象的字符串格式必须满足json格式
    var strDog = "{\"name\":\"小黄狗\",\"age\":2}";
    var jsonDog = JSON.parse(strDog);
    console.log("jsonDog= ", jsonDog)
    }
    script>
    head>
    <body>
    <h1>JSON对象和字符串对象转换h1>
    body>
    html>

    打开浏览器控制台,输出如下:

    image-20221206171641114

    3.2注意事项和细节

    1. JSON.stringify(json对象)会返回对应的string,并不会影响原来json对象

    2. JSON.parse(jsonString)方法会返回对应的json对象,并不会影响原来的string

    3. 在定义Json对象时,可以使用单引号''或者双引号""表示字符串,甚至前面的key可以不用任何引号

      比如var json_person={"name":"jack","age":100};

      也可以写成var json_person={'name':'jack','age':100};

      或者是var json_person={name:"jack",age:100};

    4. 但是在把原生字符串转成json对象时,必须使用双引号"",否则会报错

    5. JSON.springfiy(json对象)方法返回的字符串都是双引号""表示的字符串,所以在语法格式正确的情况下,是可以重新转成json对象的。

    例子

    html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>JSON和字符串转换的注意事项和细节title>
    <script type="text/javascript">
    window.onload = function () {
    var jsonPerson = {
    "name": "jack",
    "age": 22
    }
    //1.JSON.stringify(json对象)会返回对应的string,并不会影响原来json对象
    var strPerson = JSON.stringify(jsonPerson);
    console.log("jsonPerson=", jsonPerson);
    //2.JSON.parse(jsonString)方法会返回对应的json对象,并不会影响原来的string
    var strDog = "{\"name\":\"小黄狗\",\"age\":2}";
    var jsonDog = JSON.parse(strDog);
    console.log("strDog=", strDog, "类型= ", typeof strDog)
    //3.在定义Json对象时,可以使用单引号或者双引号表示字符串
    // 甚至前面的key可以不用任何引号
    var jsonCat = {
    name: '猫猫',
    age: 2
    }
    console.log("jsonCat=", jsonCat);
    //4.但是在把原生字符串转成json对象时,必须使用双引号"",否则会报错
    //例如:
    var str_dog2 = "{name:'小黄狗',age:2}";
    // JSON.parse(str_dog2);--报错
    //JSON.springfiy(json对象)返回的字符串都是双引号`""`表示的字符串,
    // 所以在语法格式正确的情况下,是可以重新转成json对象的
    var strCat = JSON.stringify(jsonCat);
    var parse = JSON.parse(strCat);
    console.log("parse=", parse)
    }
    script>
    head>
    <body>
    <h1>JSON和字符串转换的注意事项和细节h1>
    body>
    html>

    打开浏览器控制台,输出如下:

    image-20221206174958016

    4.JSON在Java中使用

    前面讲述的是前端页面中json对象和字符串之间的转化。在实际开发中,前端将json格式的字符串发送给后端,后端拿到后,可以将其转成java对象,进行其他操作,并可以在业务操作后,重新向前端发送json格式的字符串。

    这意味着在Java后端中,同样有对象和字符串对象转换的需求。

    image-20221206160402814

    4.1说明

    1. Java中使用json,需要引入第三方的包 gson.jar
    2. Gson是Google提供的用来在Java对象和 JSON数据之间进行映射的Java类库
    3. 可以对JSON字符串和Java对象相互转换

    4.2JSON在Java中的应用场景

    1. Javabean对象和json字符串的相互转换
    2. List对象和json字符串的相互转换
    3. Map对象和json字符串的相互转换
    image-20221206181923636

    4.3Java对象和JSON字符串互转

    在项目中的lib目录下将gson.jar文件复制过来,点击add as library作为库

    image-20221206183307336

    Javabean:Book类

    package com.li.json;
    //这是一个Javabean
    public class Book {
    private Integer id;
    private String name;
    public Book(Integer id, String name) {
    this.id = id;
    this.name = name;
    }
    public Integer getId() {
    return id;
    }
    public void setId(Integer id) {
    this.id = id;
    }
    public String getName() {
    return name;
    }
    public void setName(String name) {
    this.name = name;
    }
    @Override
    public String toString() {
    return "Book{" +
    "id=" + id +
    ", name='" + name + '\'' +
    '}';
    }
    }

    JavaJson:

    package com.li.json;
    import com.google.gson.Gson;
    public class JavaJson {
    public static void main(String[] args) {
    //创建一个gson对象,作为一个工具对象使用
    Gson gson = new Gson();
    //演示Javabean和json格式字符串的转换
    Book book = new Book(10001, "三国演义");
    //1.演示把一个Javabean转成json格式的字符串
    String strBook = gson.toJson(book);
    System.out.println("strBook=" + strBook);
    //2.json字符串-->JavaBean
    //(1)strBook 就是json字符串
    //(2)Book.class 指定将json字符串转成Book类型的对象
    //(3)底层使用反射机制来完成
    Book book2 = gson.fromJson(strBook, Book.class);
    System.out.println("book2=" + book2);
    }
    }
    image-20221206184342711

    4.4List对象和JSON字符串互转

    Book类见4.3

    JavaJson:

    package com.li.json;
    import com.google.gson.Gson;
    import com.google.gson.reflect.TypeToken;
    import java.lang.reflect.Type;
    import java.util.ArrayList;
    import java.util.List;
    public class JavaJson {
    public static void main(String[] args) {
    //创建一个gson对象,做为一个工具对象使用
    Gson gson = new Gson();
    //3.演示把List对象-->json字符串
    ArrayList bookList = new ArrayList<>();
    bookList.add(new Book(100, "天龙八部"));
    bookList.add(new Book(200, "红楼梦"));
    //因为把一个对象或者集合转成字符串,相对比较简单
    //底层只需要遍历,按照json格式拼接返回即可
    String strBookList = gson.toJson(bookList);
    System.out.println("strBookList= " + strBookList);
    //4.把json字符串转成-->list对象
    //(1)如果要把json字符串,转成 集合 这种比较复杂的类型,需要使用Gson提供的一个类:TypeToken
    //(2)这个TypeToken类在com.google.gson.reflect下面,在反射对象的时候使用
    //(3)TypeToken 是一个自定义泛型类,通过TypeToken来指定我们需要转换成的类型
    /*
    * public class TypeToken {
    * final Class rawType;
    * final Type type;
    * final int hashCode;
    *
    * protected TypeToken() {
    * this.type = getSuperclassTypeParameter(this.getClass());
    * this.rawType = Types.getRawType(this.type);
    * this.hashCode = this.type.hashCode();
    * }
    * ...
    * ...
    * }
    */
    /*
    TypeToken
    (1)下面的语句new TypeToken>(){}.getType(),
    返回类型的完整的路径 java.util.List
    (2)gson的设计者需要得到类型的完整路径,然后进行底层的反射
    (3)所以gson设计者提供了一个TypeToken类来搞定
    */
    Type type = new TypeToken>(){}.getType();
    System.out.println(type.getClass());//class com.google.gson.internal.$Gson$Types$ParameterizedTypeImp
    // System.out.println("type= " + type);//java.util.List
    List bookList2 = gson.fromJson(strBookList, type);
    System.out.println("bookList2="+bookList2);
    }
    }
    image-20221206195524343

    4.4.1TypeToken

    TypeToken类的作用是:得到类型的完整路径,然后进行底层的反射

    Type type = new TypeToken>(){}.getType();

    一个问题,TypeToken为什么要加{}?

    1. 如果我们把下面语句中的 {} 去掉,会提示
      'TypeToken()' has protected access in 'com.google.gson.reflect.TypeToken'

    2. 因为TypeToken的无参构造器是protected的,而语句TypeToken>() 就是调用其无参构造器。我们知道,如果一个方法是protected,并且和当前类不在同一个包,那么就没有该方法的访问权限,因此报错。

    image-20221206201119300
    1. 那为什么加上{} ,就可以访问了呢?这里涉及到匿名内部类的知识。

    2. 当我们这样使用的时候:new TypeToken>(){} ,其实这个类型就不是TypeToken,而是一个匿名内部类(可以理解为TypeToken的一个子类)

    3. 而且这个匿名内部类有自己的无参构造器(隐式),根据java基础,当执行子类的无参构造器时,默认调用super(); 到父类的无参构造器执行

    我们在Type type = new TypeToken>() {}.getType();处打上断点,并在TypeToken类中的无参构造器旁也打上断点。点击debug,点击Resume Program按钮

    image-20221206203330984

    可以看到光标跳转到TypeToken类中的无参构造器:

    image-20221206203841187

    再点击step over,可以看到,type属性拿到了类型的完整路径,这样才能去进行底层的反射

    image-20221206204029747

    4.4.2二说TypeToken

    我们用两个类来模拟一下上述4.4.1的过程

    在src目录下创建两个包:t1和t2,在t1中创建一个A类,在t2中创建一个Test类

    image-20221206210021732

    A类:

    package com.li.t1;
    public class A {
    protected A() {
    System.out.println("A 的protected A() 被调用...");
    }
    }

    这时如果在Test类中new一个A类对象,那么将会报错,原因就是被 protected 修饰的成员对于本包和其子类可见。而A和Test类既不在同一个包,也不是继承关系。这和4.4.1报错的原因完全一致。

    实际上,protected的可见性在于两点:1.基类的 protected 成员是包内可见的,并且对子类可见;2.若子类与基类不在同一包中,那么在子类中,子类实例可以访问其从基类继承而来的protected方法,而不能访问基类实例的protected方法。

    Java protected 关键字详解 | 菜鸟教程 (runoob.com)

    image-20221206210925742
    package com.li.t2;
    import com.li.t1.A;
    public class Test {
    public static void main(String[] args) {
    A a = new A() {};
    //1.因为A类和Test类不在同一个包,也不是继承关系,不能访问A的protected成员,包括构造器
    //2. A(){}就是一个匿名内部类,可以理解成A的子类
    //3. A(){} 有一个隐式的无参构造器,会调用super()
    //4. 当你执行 new A(){} 时,会调用A类的 protected无参构造器
    // 泛型+匿名内部类
    System.out.println(a.getClass());//class com.li.t2.Test$1
    }
    }
    image-20221206213348118

    4.5Map对象和JSON字符串互转

    Book类见4.3

    JavaJson:

    package com.li.json;
    import com.google.gson.Gson;
    import com.google.gson.reflect.TypeToken;
    import java.lang.reflect.Type;
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    public class JavaJson {
    public static void main(String[] args) {
    //创建一个gson对象,做为一个工具对象使用
    Gson gson = new Gson();
    //5.把map对象转成-->json字符串
    HashMap bookMap = new HashMap<>();
    bookMap.put("k1", new Book(400, "射雕英雄传"));
    bookMap.put("k2", new Book(500, "楚留香传奇"));
    String strBookMap = gson.toJson(bookMap);
    System.out.println("strBookMap=" + strBookMap);
    //6.json字符串转成-->map对象
    //new TypeToken>(){}.getType()
    //===> java.util.Map
    Map bookMap2 = gson.fromJson(strBookMap,
    new TypeToken>(){}.getType());
    System.out.println(bookMap2);
    }
    }
    image-20221206215435201
  • 相关阅读:
    民安智库(第三方满意度调研公司)写字楼客户满意度调查
    6.1 KMP算法搜索机器码
    docker简易入门(极简,纯干货)
    Linux环境中使用C++ JsonCpp库
    【基础教程】基于Matlab画花式箱体图
    shell字符串处理之字符串替换、截断
    Response Header中不暴露Server(IIS)版本、ASP.NET及相关版本等信息
    丈母娘说:有编制的不如搞编程的
    内容创作者如何下载头条号西瓜视频的视频
    JAVA多线程并发(一):线程的创建
  • 原文地址:https://www.cnblogs.com/liyuelian/p/16960724.html