JS-JSON

JS-JSON

1.JSON概述

1.1什么是JSON,有什么用?

JavaScript Object Notation(JavaScript对象标记),简称JSON。(数据交换格式)

JSON的主要作用是:在系统A和系统B交换数据时,作为一种标准的数据交换格式。

JSON目前非常流行,九成以上的系统都用的JSON。

1.2最常用的两种数据交换格式

在实际开发中,有两种数据交换格式使用最多,分别是JSON和XML。

1.2.1两种数据交换格式特点

  1. JSON:体积小,易解析。
  2. XML:体积较大,解析麻烦,但是优点是语法严谨。常用于银行相关系统中。

1.2.2两种数据交换格式的写法

JSON:

<script type="text/javascript">
    var students = [
        {"sno":"001","sname":"张三","sex":"男"},
        {"sno":"002","sname":"李四","sex":"女"},
        {"sno":"003","sname":"王五","sex":"男"}
    ];
</script>

XML:

<?xml version="1.0" encoding="UTF-8"?>
<students>
    <student sno="001">
        <sname>张三</sname>
        <sex>男</sex>
    </student>
    <student sno="002">
        <sname>李四</sname>
        <sex>女</sex>
    </student>
    <student sno="003">
        <sname>王五</sname>
        <sex>男</sex>
    </student>
</students>

HTML和XML有一个父亲:SGML(标准通用的标记语言)

HTML主要做页面展示,所以语法松散,很随意。

XML主要做数据存储和数据描述,所以语法相当严格。

2.创建JSON对象并访问其属性

2.1JSON的语法格式

var 对象名 = {
    "属性名1":属性值1,
    "属性名2":属性值2,
    "属性名3":属性值3,
    ...
};

2.2创建JSON对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        //创建一个JSON对象
        var emp = {
            "empno" : "001",
            "ename" : "张三",
            "sex" : "男"
        };
        //访问JSON对象里的属性
        alert(emp.empno + "," + emp.ename + "," + emp.sex);
    </script>
</body>
</html>

JS-JSON

2.3对比不使用JSON创建对象

在没有使用JSON时,需要先定义类,然后通过类创建对象,然后再访问对象的属性。

//定义类
Emp = function(empno,ename,sex) {
    this.empno = empno;
    this.ename = ename;
    this.sex = sex;
};
//创建对象
var emp = new Emp("001","张三","男");
//访问对象属性
alert(emp.empno + "," + emp.ename + "," + emp.sex);

对比起来,JSON最大的不同在于对象没有类型。

这点使得JSON更加轻巧,体积小,易解析,是轻量级的。

3.创建JSON数组并遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建JSON数组并遍历</title>
</head>
<body>
    <script type="text/javascript">
        //创建JSON数组
        var emps = [
            {"empno":"001","ename":"张三","sex":"男"},
            {"empno":"002","ename":"李四","sex":"女"},
            {"empno":"003","ename":"王五","sex":"男"}
        ];
        //遍历JSON数组
        for(var i = 0;i < emps.length;i++) {
            var emp = emps[i];
            alert(emp.empno + "," + emp.ename + "," + emp.sex);
            // document.write(emp.empno + "," + emp.ename + "," + emp.sex);
            // document.write("<br>");
        }
    </script>
</body>
</html>

JS-JSON

4.创建套娃对象实例

4.1实例1

请设计一个JSON格式的数据,可以描述一个学生的学号、姓名、性别、爱好(有多项)、住址(多级别)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建JSON数组并遍历</title>
</head>
<body>
    <script type="text/javascript">
        //创建JSON对象
        var student = {
            "sno" : "001",
            "sname" : "张三",
            "sex" : "男",
            "hobby" : ["唱","跳","rap"],
            "address" : {
                "province" : "河南",
                "city" : "南阳",
                "area" : "宛城区"
            }
        };
        //访问对象属性
        //要求显示该名学生的姓名、来自哪个城市、兴趣爱好有哪些
        document.write(
        student.sname + "同学来自" 
        + student.address.province + student.address.city
        + ",兴趣是" 
        + student.hobby[0] + "、" + student.hobby[1] + "、" + student.hobby[2] + "。"
        );
    </script>
</body>
</html>

JS-JSON

4.2实例2

请设计一个JSON格式的数据,可以描述整个班级中每一个学生的信息,以及总人数信息。

<script type="text/javascript">
    var students = {
        "count" : 3,
        "student" : [
            {"sno" : "001","sname" : "张三","sex" : "男"},
            {"sno" : "002","sname" : "李四","sex" : "女"},
            {"sno" : "003","sname" : "王五","sex" : "男"}
        ]
    };
</script>

5.eval函数

eval函数的作用:

将一段字符串当作JS代码解释并执行。

如:

<script type="text/javascript">
    window.eval("var i = 100;");
	alert(i);
</script>

JS-JSON

java连接数据库,查询数据后,将数据在java程序中拼接成JSON格式的字符串,然后将JSON格式的字符串响应到浏览器中。

也就是说,响应到浏览器中的仅仅是一个JSON格式的字符串,还不是一个JSON对象。

此时,我们可以使用eval函数,就将JSON格式的字符串转换成JSON对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>eval函数</title>
</head>
<body>
    <script type="text/javascript">
        //JSON格式的字符串
        var fromJava = "{\"username\":\"张三\",\"password\":\"123\"}";
        //将JSON格式的字符串转换成JSON对象
        window.eval("var userObj = " + fromJava);
        //访问对象属性
        alert(userObj.username + "," + userObj.password);
    </script>
</body>
</html>

JS-JSON

上一篇:netcore3.1 NPOI生成带有图片的word文档并输出


下一篇:MyBatis学习07--动态sql语句if、where、foreach