跳至主要內容

JSON编程

wangdx大约 14 分钟

项目地址open in new window

JSON 简介

XML 缺点

  • 在早期的数据交换处理中，由于开发者所使用的平台不同，所以常见的做法是利用 XML 进行数据导出与导入设计，但是在实际的开发中，这样的做法会存在有如下的几个缺点:
    • 缺点一:XML 设计之初兼顾到了页面显示的需求，所以文件的结构过于繁琐，从而影响到传输性能;
    • 缺点二:XML 数据生成与解析的过程过于繁琐，需要开发者进行大量节点关系的配置处理;
    • 缺点三:在使用 Ajax 进行数据交换时需要通过脚本语言进行繁琐的 DOM 解析操作。

JSON 诞生

为了解决传统 XML 在数据存储中的缺点，于是在 2001 年出现了 JSON(JavaScript Object Notation、JS 对象符号)数据格式该数据结构由 Douglas Crockford 设计并推广，在 2006 年发展成为主流数据格式，沿用至今已经成为了各个软件项目中必备的一项开发技术，JSON 官方网站地址为“json.org"

JSON 技术应用

在使用 XML 进行数据描述时由于受到 XML 语法限制，所以在编写文件内容时每次都需要额外的编写前导声明、根元素与完结元素，这样就加重了数据传输的负担。而通过 JSON 描述的数据不仅清晰而且洁，数据量的体积也相对较小，这样就可以代替 XML 达到轻量级数据传输的目的，从而提高程序的响应性能

JSON 组成结构

JSON 组成

JSON 的数据结构组成相对简单，主要就是由普通数据以及数组两类的形式完成，其中在一个数组中还可以继续嵌套另外一个数组项，同时可以方便的保存各种数据类型(数字、字符串、布尔、日期等)

1、

{
    "name": "沐言科技",
    "homepage": "www.yootk.com",
    "depts": ["教学研发部", "财务部", "市场部"]
}

2、
{
    "name": "沐言科技",
    "location": "中国-北京",
    "homepage": "www.yootk.com"
}
3、
{
    "name": "沐言科技",
    "homepage": "www.yootk.com",
    "depts": [
        {"deptno": 10, "dname": "教学研发部", "loc": "北京"},
        {"deptno": 20, "dname": "财务部", "loc": "上海"},
        {"deptno": 30, "dname": "市场部", "loc": "广州"}
    ]
}

4、
[
    {"deptno": 10, "dname": "教学研发部", "loc": "北京"},
    {"deptno": 20, "dname": "财务部", "loc": "上海"},
    {"deptno": 30, "dname": "市场部", "loc": "广州"}
]

JSONObject

JSONObject 类继承结构

  • 项目开发中如果要想定义 JSON 结构的字符串，可以直接采用字符串拼凑的方式，或者是使用一些 Java 的开源工具类来完成在国内使用较多的工具是阿里推出的 FastJSON 组件，而国外使用较多的是 Jackson 组件，本次开发将通过 FastJSON 实现 JSON 数据的生成与解析处理
  • 在 FastJSON 中如果要想进行数据对的设置，可以通过 JSONObject 类来完成，该类是 JSON 抽象类的子类，如图 10-5 所示，而在进行数据解析时也可以通过 JSON 抽象类中提供的 parseObject()方法将数据转为 JSONObject 实例

1、https://mvnrepository.com/

2、
package com.yootk.json;

import com.alibaba.fastjson.JSONObject;

public class YootkJSONDemo {
    public static void main(String[] args) {
        JSONObject companyObject = new JSONObject(); // 获取JSONObject对象
        companyObject.put("name", "沐言科技"); // 像Map接口一样保存数据
        companyObject.put("homepage", "www.yootk.com");
        System.out.println(companyObject.toJSONString());
    }
}


3、{"name":"沐言科技","homepage":"www.yootk.com"}

package com.yootk.json;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;

import java.util.Map;

public class YootkJSONDemo {
    public static void main(String[] args) {
        String jsonData = "{\"name\":\"沐言科技\",\"homepage\":\"www.yootk.com\"}"; // JSON文本
        JSONObject jsonObject = JSON.parseObject(jsonData); // 将普通的文本转为JSON对象
        for (Map.Entry<String, Object> entry : jsonObject.entrySet()) {
            System.out.println("KEY = " + entry.getKey() + ":、VALUE = " + entry.getValue());
        }
    }
}

JSONArray

JSONArray 类继承结构

除了普通的键值对之外，在 JSON 中还包含有数组数据信息，数组中的每一个元素可以是基本数据，也可能是另外一组键值对。 FastJSON 组件针对于数组的操作提供了 JSONArray 程序类

1、
package com.yootk.json;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

public class YootkJSONDemo {
    public static void main(String[] args) {
        JSONArray jsonArray = new JSONArray();
        long deptnos[] = new long[]{10, 20, 30};
        String dnames[] = new String[] {"教学研发部", "财务部", "时市场部"};
        String locs[] = new String[] {"北京", "上海", "广州"};
        for (int x = 0; x < deptnos.length; x++) {
            JSONObject object = new JSONObject();
            object.put("deptno", deptnos[x]);
            object.put("dname", dnames[x]);
            object.put("loc", locs[x]);
            jsonArray.add(object); // JSONArray嵌套了JSONObject
        }
        System.out.println(jsonArray.toJSONString());
    }
}


2、
[{"loc":"北京","dname":"教学研发部","deptno":10},{"loc":"上海","dname":"财务部","deptno":20},{"loc":"广州","dname":"时市场部","deptno":30}]

3、
package com.yootk.json;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

public class YootkJSONDemo {
    public static void main(String[] args) {
        String jsonData = "[{\"loc\":\"北京\",\"dname\":\"教学研发部\",\"deptno\":10}," +
                "{\"loc\":\"上海\",\"dname\":\"财务部\",\"deptno\":20}," +
                "{\"loc\":\"广州\",\"dname\":\"时市场部\",\"deptno\":30}]";
        JSONArray jsonArray = JSON.parseArray(jsonData); // 进行JSON数组的解析
        for (int x = 0; x < jsonArray.size(); x++) {
            JSONObject object = jsonArray.getJSONObject(x); // 获取JSONObject信息
            System.out.println("【部门信息】部门编号：" + object.getLong("deptno") +
                    "、部门名称：" + object.getString("dname") +
                    "、部门位置：" + object.getString("loc"));
        }
    }
}

对象与 JSON 转换

对象转为 JSON 数据

实际项目开发过程中，往往会利用简单 Java 类来实现所需数据的封装，而为了便于简单 Java 类对象信息转为 JSON 数据内容开发者可以直接通过 FastSON 组件实现处理

1、

package com.yootk.vo;

public class Dept {
    private Long deptno;
    private String dname;
    private String loc;

    public Long getDeptno() {
        return deptno;
    }

    public void setDeptno(Long deptno) {
        this.deptno = deptno;
    }

    public String getDname() {
        return dname;
    }

    public void setDname(String dname) {
        this.dname = dname;
    }

    public String getLoc() {
        return loc;
    }

    public void setLoc(String loc) {
        this.loc = loc;
    }

    @Override
    public String toString() {
        return "【Dept】部门编号：" + this.deptno + "、部门名称：" + this.dname + "、部门位置：" + this.loc;
    }
}



2、
package com.yootk.json;

import com.alibaba.fastjson.JSONObject;
import com.yootk.vo.Dept;

public class YootkJSONDemo {
    public static void main(String[] args) {
        Dept dept = new Dept(); // 获取VO类的实例化对象
        dept.setDeptno(10L);
        dept.setDname("教学研发部");
        dept.setLoc("北京");
        JSONObject jsonObject = new JSONObject(); // 转换需要JSONObject支持
        jsonObject.put("dept", dept); // 进行数据的存储
        System.out.println(jsonObject.toJSONString());
    }
}


3、
package com.yootk.json;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.yootk.vo.Dept;

public class YootkJSONDemo {
    public static void main(String[] args) {
        String jsonData = "{\"dept\":{\"deptno\":10,\"dname\":\"教学研发部\",\"loc\":\"北京\"}}"; // JSON文本
        JSONObject jsonObject = JSON.parseObject(jsonData); // 进行文本与JSON对象之间的转换
        Dept dept = jsonObject.getObject("dept", Dept.class);
        System.out.println(dept);
    }
}

List 集合与 JSON 转换

List 转 JSON 数据

在数据传输的过程中，往往会进行一组数据的统一管理，这样在开发中就可以通过数组的形式来完成，而在 FastJSON 组件中开发者可以直接使用 List 集合实现数据保存，同时利用 JSON 类中所提供的 toJSONString()方法可以实现任意类对象实例转为 JSON 文本的处理

1、
package com.yootk.json;

import com.alibaba.fastjson.JSON;
import com.yootk.vo.Dept;

import java.util.ArrayList;
import java.util.List;

public class YootkJSONDemo {
    public static void main(String[] args) {
        long deptnos[] = new long[]{10, 20, 30};
        String dnames[] = new String[]{"教学研发部", "财务部", "时市场部"};
        String locs[] = new String[]{"北京", "上海", "广州"};
        List<Dept> deptList = new ArrayList<>();
        for (int x = 0; x < deptnos.length; x++) {  // 循环生成对象
            Dept dept = new Dept(); // 获取VO类的实例化对象
            dept.setDeptno(deptnos[x]);
            dept.setDname(dnames[x]);
            dept.setLoc(locs[x]);
            deptList.add(dept); // 集合存储
        }
        // 以上的操作是一个纯粹的List集合数据，而这个List集合假设是通过业务中心返回的结果
        // 这个时候千万不要再去思考将List集合的数据转为JSONObject或者是将集合转为JSONArray
        String jsonData = JSON.toJSONString(deptList); // 集合转为JSON数据
        System.out.println(jsonData);
    }
}


2、
[{"deptno":10,"dname":"教学研发部","loc":"北京"},{"deptno":20,"dname":"财务部","loc":"上海"},{"deptno":30,"dname":"时市场部","loc":"广州"}]

3、
package com.yootk.json;

import com.alibaba.fastjson.JSON;
import com.yootk.vo.Dept;

import java.util.List;

public class YootkJSONDemo {
    public static void main(String[] args) {
        String jsonData = "[{\"deptno\":10,\"dname\":\"教学研发部\",\"loc\":\"北京\"}," +
                "{\"deptno\":20,\"dname\":\"财务部\",\"loc\":\"上海\"}," +
                "{\"deptno\":30,\"dname\":\"时市场部\",\"loc\":\"广州\"}]";
        List<Dept> deptList = JSON.parseArray(jsonData, Dept.class); // 直接转换
        deptList.forEach(System.out::println);
    }
}

Map 集合与 JSON 转换

Map 与 JSON

在使用 FastJSON 实现数据转换处理时，需要利用 JSONObject 实现数据键值对的配置，随后再通过 JSONObject 直接生成所需要的 JSON 文本数据

在实际的项目开发中，开发者一般都会使用 Map 集合保存键值对为了便于开发者应用，所以在 FastSON 组件中提供了一个数据转换引擎，可以直接将 Map 集合转为 JSON 数据，如图 10-10 所示，这样就可以减少对 JSONObject 类型的依赖，使得程序的编写更加灵活。


1、

package com.yootk.vo;

import java.util.Date;

public class Emp {
    private Long empno;
    private String ename;
    private Date today;

    public Long getEmpno() {
        return empno;
    }

    public void setEmpno(Long empno) {
        this.empno = empno;
    }

    public String getEname() {
        return ename;
    }

    public void setEname(String ename) {
        this.ename = ename;
    }

    public Date getToday() {
        return today;
    }

    public void setToday(Date today) {
        this.today = today;
    }

    @Override
    public String toString() {
        return "【Emp】雇员编号：" + this.empno + "、雇员姓名：" + this.ename + "、打卡日期：" + this.today;
    }
}


2、
package com.yootk.json;

import com.alibaba.fastjson.JSON;
import com.yootk.vo.Dept;
import com.yootk.vo.Emp;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

public class YootkJSONDemo {
    public static void main(String[] args) {
        Map<String, Object> map = new HashMap<>();
        Emp emp = new Emp(); // 获取Emp对象实例
        emp.setEname("李兴华");
        emp.setEmpno(9988L);
        emp.setToday(new Date()); // 今天的日期
        map.put("emp", emp); // 将对象保存在Map集合里面
        Dept dept = new Dept();
        dept.setDeptno(10L);
        dept.setDname("教学研发部");
        dept.setLoc("北京");
        map.put("dept", dept);
        map.put("company", "沐言科技");
        map.put("homepage", "www.yootk.com");
        String jsonData = JSON.toJSONString(map); // 将Map转为JSON
        System.out.println(jsonData);
    }
}


3、
package com.yootk.json;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.serializer.SerializerFeature;
import com.yootk.vo.Dept;
import com.yootk.vo.Emp;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

public class YootkJSONDemo {
    public static void main(String[] args) {
        Map<String, Object> map = new HashMap<>();
        Emp emp = new Emp(); // 获取Emp对象实例
        emp.setEname("李兴华");
        emp.setEmpno(9988L);
        emp.setToday(new Date()); // 今天的日期
        map.put("emp", emp); // 将对象保存在Map集合里面
        Dept dept = new Dept();
        dept.setDeptno(10L);
        dept.setDname("教学研发部");
        dept.setLoc("北京");
        map.put("dept", dept);
        map.put("company", "沐言科技");
        map.put("homepage", "www.yootk.com");
        String jsonData = JSON.toJSONString(map,
                SerializerFeature.WriteDateUseDateFormat,
                SerializerFeature.PrettyFormat); // 将Map转为JSON
        System.out.println(jsonData);
    }
}


4、
{
  "emp":{
    "empno":9988,
    "ename":"李兴华",
    "today":"2021-02-09 19:03:59"
  },
  "company":"沐言科技",
  "dept":{
    "deptno":10,
    "dname":"教学研发部",
    "loc":"北京"
  },
  "homepage":"www.yootk.com"
}

5、
{"emp":{"empno":9988,"ename":"李兴华","today":1612868783985},"company":"沐言科技","dept":{"deptno":10,"dname":"教学研发部","loc":"北京"},"homepage":"www.yootk.com"}


6、
package com.yootk.json;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.yootk.vo.Dept;
import com.yootk.vo.Emp;

public class YootkJSONDemo {
    public static void main(String[] args) {
        String jsonData = "{\"emp\":{\"empno\":9988,\"ename\":\"李兴华\",\"today\":1612868783985}," +
                "\"company\":\"沐言科技\"," +
                "\"dept\":{\"deptno\":10,\"dname\":\"教学研发部\",\"loc\":\"北京\"}," +
                "\"homepage\":\"www.yootk.com\"}";
        JSONObject jsonObject = JSON.parseObject(jsonData); // 只能够将文本转为JSONObject
        System.out.println("【company】" + jsonObject.get("company"));
        System.out.println("【homepage】" + jsonObject.get("homepage"));
        System.out.println("【emp】" + jsonObject.getObject("emp", Emp.class));
        System.out.println("【dept】" + jsonObject.getObject("dept", Dept.class));
    }
}

 String jsonData = JSON.toJSONString(map,"yyyy-MM-dd HH:mm:ss",
                JSONWriter.Feature.PrettyFormat); // 将Map转为JSON

JavaScript 操作 JSON

JSON 定义

JSON 是一种世界上通用的数据传输结构，所以可以在任意的编程语言中使用 JSON 数据格式，开发者如果有需要也可以直接在 JavaScript 中定义 JSON 结构并进行相关操作。

1、

<html>
  <head>
    <title>沐言科技：www.yootk.com</title>
    <script type="text/javascript">
      jsonObject = {
        // 此时定义了一个JSON对象
        ename: "李兴华",
        today: 1613968783985,
        empno: 9988,
        dept: { deptno: 10, dname: "教学研发部", loc: "北京" },
      }; // 此时的数据不是JSON文本，而是一个JSON的对象
      console.log(jsonObject);
    </script>
  </head>
  <body></body>
</html>

2、

<html>
  <head>
    <title>沐言科技：www.yootk.com</title>
    <script type="text/javascript">
      jsonObject = {
        // 此时定义了一个JSON对象
        ename: "李兴华",
        today: 1613968783985,
        empno: 9988,
        dept: { deptno: 10, dname: "教学研发部", loc: "北京" },
      }; // 此时的数据不是JSON文本，而是一个JSON的对象
      console.log(
        "【雇员信息】雇员编号：" +
          jsonObject.empno +
          "、雇员姓名：" +
          jsonObject.ename +
          "、打卡日期：" +
          jsonObject.today
      );
      console.log(
        "【部门信息】部门编号：" +
          jsonObject.dept.deptno +
          "、部门名称：" +
          jsonObject.dept.dname +
          "、部门位置：" +
          jsonObject.dept.loc
      );
    </script>
  </head>
  <body></body>
</html>

3、
<html>
  <head>
    <title>沐言科技：www.yootk.com</title>
    <script type="text/javascript">
      Date.prototype.format = function (fmt) {
        // 将时间戳数字转为日期时间
        var o = {
          "M+": this.getMonth() + 1, // 月份
          "d+": this.getDate(), // 日
          "h+": this.getHours(), // 小时
          "m+": this.getMinutes(), // 分
          "s+": this.getSeconds(), // 秒
          "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
          S: this.getMilliseconds(), // 毫秒
        };
        if (/(y+)/.test(fmt)) {
          // 格式判断
          fmt = fmt.replace(
            RegExp.$1,
            (this.getFullYear() + "").substr(4 - RegExp.$1.length)
          );
          for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
              fmt = fmt.replace(
                RegExp.$1,
                RegExp.$1.length == 1
                  ? o[k]
                  : ("00" + o[k]).substr(("" + o[k]).length)
              );
          return fmt;
        }
      };
      jsonObject = {
        // 此时定义了一个JSON对象
        ename: "李兴华",
        today: 1613968783985,
        empno: 9988,
        dept: { deptno: 10, dname: "教学研发部", loc: "北京" },
      }; // 此时的数据不是JSON文本，而是一个JSON的对象
      console.log(
        "【雇员信息】雇员编号：" +
          jsonObject.empno +
          "、雇员姓名：" +
          jsonObject.ename +
          "、打卡日期：" +
          new Date(jsonObject.today).format("yyyy-MM-dd hh:mm:ss")
      );
      console.log(
        "【部门信息】部门编号：" +
          jsonObject.dept.deptno +
          "、部门名称：" +
          jsonObject.dept.dname +
          "、部门位置：" +
          jsonObject.dept.loc
      );
    </script>
  </head>
  <body></body>
</html>

4、
<html>
  <head>
    <title>沐言科技：www.yootk.com</title>
    <script type="text/javascript">
      jsonObject = {
        add: function (x, y) {
          // 定义函数
          return x + y;
        },
        info: {
          title: "沐言科技",
          url: "www.yootk.com",
          get: function () {
            return this.title + "：" + this.url;
          },
        },
      };
      console.log("【加法计算】" + jsonObject.add(10, 20));
      console.log("【信息获取】" + jsonObject.info.get());
    </script>
  </head>
  <body></body>
</html>

eval()函数

JSON 数据处理

通过 JSON 可以代替 XML 实现更加轻量级的数据传输处理，但是 JSON 是以普通文本的形式实现了数据的传递操作，所以在 JavaScript 中提供了一个重要的 eval()函数，利用该函数可以直接将字符串转为 JSON 对象，这样就可以实现 JSON 数据的解析操作。

1、

{"emp":{"empno":9988,"ename":"李兴华","today":1612868783985},"company":"沐言科技","dept":{"deptno":10,"dname":"教学研发部","loc":"北京"},"homepage":"www.yootk.com"}


2、
<html>
<head>
    <title>沐言科技：www.yootk.com</title>
    <script type="text/javascript">
        Date.prototype.format = function (fmt) {		// 将时间戳数字转为日期时间
            var o = {
                "M+": this.getMonth() + 1, 			// 月份
                "d+": this.getDate(),			// 日
                "h+": this.getHours(),			// 小时
                "m+": this.getMinutes(),			// 分
                "s+": this.getSeconds(),			// 秒
                "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
                "S": this.getMilliseconds()			// 毫秒
            };
            if (/(y+)/.test(fmt)){ 				// 格式判断
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
                    .substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt))
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
                            : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            }
        }
        jsonText = "{\"emp\":{\"empno\":9988,\"ename\":\"李兴华\",\"today\":1812868783985}," +
            "\"company\":\"沐言科技\",\"dept\":" +
            "{\"deptno\":10,\"dname\":\"教学研发部\",\"loc\":\"北京\"}," +
            "\"homepage\":\"www.yootk.com\"}"; // 文本数据内容
        jsonObject = eval("(" + jsonText + ")"); // 将文本转为JSON对象
        console.log("【公司信息】公司名称：" + jsonObject.company + "、公司主页：" + jsonObject.homepage);
        console.log("【雇员信息】雇员编号：" + jsonObject.emp.empno + "、雇员姓名：" + jsonObject.emp.ename + "、打卡日期：" +
            new Date(jsonObject.emp.today).format("yyyy-MM-dd hh:mm:ss"));
        console.log("【部门信息】部门编号：" + jsonObject.dept.deptno + "、部门名称：" + jsonObject.dept.dname + "、部门位置：" + jsonObject.dept.loc)
    </script>
</head>
<body>
</body>
</html>

2、
[{"deptno":10,"dname":"教学研发部","loc":"北京"},{"deptno":20,"dname":"财务部","loc":"上海"},{"deptno":30,"dname":"时市场部","loc":"广州"}]

3、
<html>
<head>
    <title>沐言科技：www.yootk.com</title>
    <script type="text/javascript">
        jsonText = "[{\"deptno\":10,\"dname\":\"教学研发部\",\"loc\":\"北京\"}," +
            "{\"deptno\":20,\"dname\":\"财务部\",\"loc\":\"上海\"}," +
            "{\"deptno\":30,\"dname\":\"时市场部\",\"loc\":\"广州\"}]";
        jsonObject = eval("("+jsonText+")"); // 文本转为JSON对象
        for (x = 0; x < jsonObject.length; x ++) {
            console.log("【部门信息】编号：" + jsonObject[x].deptno + "、名称：" + jsonObject[x].dname + "、位置：" + jsonObject[x].loc);
        }
    </script>
</head>
<body>
</body>
</html>

JSON 工具包

eval()函数

eval()函数是 JavaScript 所提供的标准 JSON 文本转为 JSON 对象的处理函数，但是在使用 eva10 函数时由于缺少各种校验机制就有可能会使程序出现安全漏洞，所以在实际的项目开发中可以利用 JSON 官方(http://www.json.org/)提供的json3.js组件，可以将一个JSON对象转换成JSON字符串，也可以将个JSON字符串转换成一个JSON对象。

1、

<html>
<head>
    <title>沐言科技：www.yootk.com</title>
    <script type="text/javascript">
        num = 99; // 变量可以直接定义
        window.onload = function() {    // 页面加载时执行
            data = "{\"count\": num * num}"; // 文本信息
            jsonObject = eval("(" + data + ")"); // 转换
            console.log(jsonObject.count); // 输出count的内容
        }
    </script>
</head>
<body>
</body>
</html>


2、
<html>
<head>
    <title>沐言科技：www.yootk.com</title>
    <script type="text/javascript" src="js/json3.js"></script>
    <script type="text/javascript">
        num = 99; // 变量可以直接定义
        window.onload = function() {    // 页面加载时执行
            data = "{\"count\": num * num}"; // 文本信息
            jsonObject = JSON.parse(data); // 实现文本操作
            console.log(jsonObject.count); // 输出count的内容
        }
    </script>
</head>
<body>
</body>
</html>

3、
[{"deptno":10,"dname":"教学研发部","loc":"北京"},{"deptno":20,"dname":"财务部","loc":"上海"},{"deptno":30,"dname":"时市场部","loc":"广州"}]

4、
<html>
<head>
    <title>沐言科技：www.yootk.com</title>
    <script type="text/javascript" src="js/json3.js"></script>
    <script type="text/javascript">
        jsonText = "[{\"deptno\":10,\"dname\":\"教学研发部\",\"loc\":\"北京\"}," +
            "{\"deptno\":20,\"dname\":\"财务部\",\"loc\":\"上海\"}," +
            "{\"deptno\":30,\"dname\":\"时市场部\",\"loc\":\"广州\"}]";
        jsonObject = JSON.parse(jsonText); // JSON文本转为对象
        for (x = 0; x < jsonObject.length; x ++) {
            console.log("【部门信息】编号：" + jsonObject[x].deptno +
                "、名称：" + jsonObject[x].dname +
                "、位置：" + jsonObject[x].loc)
        }
    </script>
</head>
<body>
</body>
</html>


5、
<html>
<head>
    <title>沐言科技：www.yootk.com</title>
    <script type="text/javascript" src="js/json3.js"></script>
    <script type="text/javascript">
        // 此时给出的JSON对象并不是一个严格的JSON文本形式，因为key上没有双引号
        jsonObject = {
            ename: "李兴华",
            empno: 9988,
            dept: {deptno: 10, dname: "教学研发部", loc: "北京"}
        }
        jsonText = JSON.stringify(jsonObject); // 格式化文本
        console.log(jsonText);
    </script>
</head>
<body>
</body>
</html>

{"ename":"李兴华","empno":9988,"dept":{"deptno":10,"dname":"教学研发部","loc":"北京"}}
https://www.bootcdn.cn/json3/

级联菜单案例

demo
上次编辑于:
MIT Licensed | Copyright © 2024-present WDX