day33-JSON&Ajax01

liyuelian 2023-04-18 原文

JSON&Ajax01

1.JSON介绍

JSON指的是JavaScript对象表示法（ JavaScript Object Notation），JSON的本质仍然是JavaScript对象
JSON是轻量级的文本数据交互格式，也是前后端进行数据通讯的一种格式：
JSON独立于语言，即java，PHP，asp.net，go等都可以使用json
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":值}
并列数据的集合（数组）用方括号[]表示，如[{"名称1":值,"名称2":值},{"名称1":值,"名称2":值}]
元素值类型：string，number，object，array，true，false，null

2.3入门案例

<!DOCTYPE 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>

打开浏览器控制台，输出如下：

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

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

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

3.1应用实例

<!DOCTYPE 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>

打开浏览器控制台，输出如下：

3.2注意事项和细节

JSON.stringify(json对象)会返回对应的string，并不会影响原来json对象
JSON.parse(jsonString)方法会返回对应的json对象，并不会影响原来的string
在定义Json对象时，可以使用单引号''或者双引号""表示字符串，甚至前面的key可以不用任何引号

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

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

或者是var json_person={name:"jack",age:100};
但是在把原生字符串转成json对象时，必须使用双引号""，否则会报错
JSON.springfiy(json对象)方法返回的字符串都是双引号""表示的字符串，所以在语法格式正确的情况下，是可以重新转成json对象的。

例子

<!DOCTYPE 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>

打开浏览器控制台，输出如下：

4.JSON在Java中使用

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

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

4.1说明

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

4.2JSON在Java中的应用场景

Javabean对象和json字符串的相互转换
List对象和json字符串的相互转换
Map对象和json字符串的相互转换

4.3Java对象和JSON字符串互转

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

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);
    }
}

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<Book> 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<T> {
         *     final Class<? super T> 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<List<Book>>(){}.getType()，
          返回类型的完整的路径 java.util.List<com.li.json.Book>
        (2)gson的设计者需要得到类型的完整路径，然后进行底层的反射
        (3)所以gson设计者提供了一个TypeToken类来搞定
         */
        Type type = new TypeToken<List<Book>>(){}.getType();
        System.out.println(type.getClass());//class com.google.gson.internal.$Gson$Types$ParameterizedTypeImp

        // System.out.println("type= " + type);//java.util.List<com.li.json.Book>

        List<Book> bookList2 = gson.fromJson(strBookList, type);
        System.out.println("bookList2="+bookList2);
    }
}

4.4.1TypeToken

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

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

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

如果我们把下面语句中的 {} 去掉，会提示
'TypeToken()' has protected access in 'com.google.gson.reflect.TypeToken'
因为TypeToken的无参构造器是protected的，而语句TypeToken<List<Book>>() 就是调用其无参构造器。我们知道，如果一个方法是protected，并且和当前类不在同一个包，那么就没有该方法的访问权限，因此报错。

那为什么加上{} ,就可以访问了呢？这里涉及到匿名内部类的知识。
当我们这样使用的时候：new TypeToken<List<Book>>(){} ，其实这个类型就不是TypeToken，而是一个匿名内部类（可以理解为TypeToken的一个子类）
而且这个匿名内部类有自己的无参构造器(隐式)，根据java基础，当执行子类的无参构造器时，默认调用super(); 到父类的无参构造器执行

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

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

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

4.4.2二说TypeToken

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

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

A类：

package com.li.t1;

public class A<T> {
    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)

package com.li.t2;

import com.li.t1.A;

public class Test {
    public static void main(String[] args) {
        A a = new A<String>() {};
        //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
    }
}

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<String, Book> 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<Map<String,Book>>(){}.getType()
        //===> java.util.Map<java.lang.String, com.li.json.Book>
        Map<String,Book> bookMap2 = gson.fromJson(strBookMap,
                new TypeToken<Map<String,Book>>(){}.getType());
        System.out.println(bookMap2);
    }
}

有关day33-JSON&Ajax01的更多相关文章

ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2
我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou
ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2
我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。最佳答案我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为
ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2
为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar
ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
ruby-on-rails - 如何优雅地重启 thin + nginx？ - 2
我的瘦服务器配置了nginx，我的ROR应用程序正在它们上运行。在我发布代码更新时运行thinrestart会给我的应用程序带来一些停机时间。我试图弄清楚如何优雅地重启正在运行的Thin实例，但找不到好的解决方案。有没有人能做到这一点？最佳答案 #Restartjustthethinserverdescribedbythatconfigsudothin-C/etc/thin/mysite.ymlrestartNginx将继续运行并代理请求。如果您将Nginx设置为使用多个上游服务器，例如server{listen80;server
ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2
在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',
ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2
我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。最佳答案或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby1.9+ 关于ruby-主要:Objectwhenrun
ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2
我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

day33-JSON&Ajax01

JSON&Ajax01

1.JSON介绍

2.JSON快速入门

2.1JSON的定义格式

2.2格式规则

2.3入门案例

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

3.1应用实例

3.2注意事项和细节

4.JSON在Java中使用

4.1说明

4.2JSON在Java中的应用场景

4.3Java对象和JSON字符串互转

4.4List对象和JSON字符串互转

4.4.1TypeToken

4.4.2二说TypeToken

4.5Map对象和JSON字符串互转

有关day33-JSON&Ajax01的更多相关文章

随机推荐