Javascript

JS-JSON

本文主要是介绍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>

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>

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>

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>

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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航