JSON详解-使用示例

已于 2024-02-03 16:59:00 修改
阅读量1.4k 收藏 21
点赞数 28
分类专栏： Java Web专栏 文章标签： json JavaScript
于 2024-01-26 04:25:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45754463/article/details/135857185
版权

文章目录

JSON

  • 概述：JSON全称 JavaScript Object Notation，是一种轻量级的数据交换格式、是一种纯文本。JSON相对于XML来说读写的速度更快。
  • 作用：
    • JSON 是用于存储和传输数据的格式
    • JSON 通常用于服务端向网页传递数据
  • 语法规则
    • 数据为 键/值 对，一个名称对应一个值，中间用 “:”
    • 数据由逗号分隔
    • 大括号保存对象，对象可以保存多个 键/值 对
    • 方括号保存数组
  • JSON值
    • 数字（整数或浮点数）
    • 字符串（双引号中）
    • 逻辑值（true 或 false）
    • 数组（在中括号中）,数组中可包含多个对象
    • 对象（在大括号中）
    • null
  • JSON 文件
    • JSON 文件的文件类型是 .json
    • JSON 文本的 MIME 类型是 application/json

JSON 举例

{"student":[
    {"name":"张三","address":"河南","age":20},
    {"name":"李四","address":"北京","age":25},
    {"name":"王五","address":"上海","age":30}
]}

student 是一个对象，里边有三条对象的信息

“name”:“张三” 等同于 JavaScript的 name=“张三”

// javascript 语法，等同于上述 json 案例
var student = [
    {"name":"张三","address":"河南","age":20},
    {"name":"李四","address":"北京","age":25},
    {"name":"王五","address":"上海","age":30}
];
// 找到张三
student[0].name;

JSON 和 XML 对比

  • 概述：JSON 和 XML 都用于接收 web 服务端的数据
  • XML 实例，和上述 JSON 实例等同
<student>
	<s>
    	<name>张三</name> <address>河南</address> <age>20</age>
    </s>
	<s>
    	<name>李四</name> <address>北京</address> <age>25</age>
    </s>
	<s>
    	<name>王五</name> <address>上海</address> <age>30</age>
    </s>
</student>
  • 不同之处
    • JSON 不需要结束标签
    • JSON 更加简短
    • JSON 读写速度更快
    • JSON 可以使用数组
    • XML 需要使用 XML 解析器来解析，JSON 使用标准的 JavaScript 函数来解析。

JSON 对象

访问对象

  • 方式一：使用 “.”

    var student,username;
student = {"name":"张三","address":"河南","age":30};
username = student.name;

  • 方式二：使用 “[]”

    var student,username;
student = {"name":"张三","address":"河南","age":30};
username = student["name"];
循环对象
  • “for-in”来循环对象的属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
    	// student 是一个对象
        var student = {"name":"张三","address":"河南","age":30};
        // 此时的 x 是代表的 键值
        for(x in student){
            document.getElementById("demo").innerHTML += x + "--" + student[x] + "<br>";
        }
    </script>
</body>
</html>
嵌套 JSON 对象

  • 实例

    student{
    "name":"张三",
    "address":"河南",
    "technologys":{
        "t1":"Java",
        "t2":"Python",
        "t3":"Go"
    }
}

  • 访问

    x = student.technologys.t1;
// 或
x = student.technologys["t1"];
删除对象属性

  • 使用 delete 关键字来删除 JSON 对象的属性

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var student = {
            "name":"张三",
            "address":"河南",
            "technologys":{
                "t1":"Java",
                "t2":"Python",
                "t3":"Go"
            }
        }
        // 删除 t3 这条数据
        delete student.technologys.t3;
        // 此时 x 就是 代表 t1、t2，因为 t3 被删除了
        for(x in student.technologys){
            document.getElementById("demo").innerHTML += x + "--" + student.technologys[x] + "<br>";
        }
    </script>
</body>
</html>

JSON 和 JavaScript 互相转换

  • JSON.parse()：将一个 JSON 字符串转换为 JavaScript 对象
  • JSON.stringify()：将 JavaScript 对象转换为 JSON 字符串
JSON.parse()

  • JSON 通常用于与服务端交换数据，在接收服务器数据时一般是字符串

  • 语法

    JSON.parse(text[,reviver])

    text：必需，一个有效的 JSON 字符串

    reviver：可选，一个转换结果的函数，将为对象的每个成员调用此函数

  • 示例代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var obj = JSON.parse('{"student":[\n' +
            '    {"name":"张三","address":"河南","age":20},\n' +
            '    {"name":"李四","address":"北京","age":25},\n' +
            '    {"name":"王五","address":"上海","age":30}\n' +
            ']}');
        document.getElementById("demo").innerHTML = obj.student[0].name + ":" + obj.student[0].address;
    </script>
</body>
</html>
日期异常
  • 概述：JSON 不能存储 Date 对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var text = '{"name":"张三","age":30,"address":"北京","createDate":"2024-01-01"}';
        var obj = JSON.parse(text,function (key, value){
        	// 如果 key 等于 createDate 这个字符串，则返回日期对象
           if(key == "createDate"){
               return new Date(value);
           } else{					// 否则返回 字符串值
               return value;
           }
        });
        document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.createDate;
    </script>
</body>
</html>
解析函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var text = '{"name":"清华大学","rank":"function(){return 1}","address":"北京"}';
        var obj = JSON.parse(text);
        // 字符串转函数
        obj.rank = eval("("+ obj.rank +")");
        document.getElementById("demo").innerHTML = obj.name + "学校排名：" + obj.rank();
    </script>
</body>
</html>

注意：将 函数作为字符串存储，然后再将字符串转换为函数，eval 方法的使用可以往下看，下边有解释

JSON.stringify()

  • JSON 通常用于与服务端交换数据，在发送服务器数据时一般是字符串

  • 语法

    JSON.stringifg(value[,replacer[,space]]);

    value：必需，要转换的 JavaScript 值（通常为对象或数组）

    replacer：可选，用于转换结果的函数或数组

    space：可选，文本添加缩进、空格和换行符，space是数字，指定数目的空格

  • 示例代码，对象转换

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
    	// 这是一个 JavaScript 对象
        var obj = {"name":"张三","address":"河南","age":30};
        // 转换成一个 JSON字符串
        var s = JSON.stringify(obj);
        document.getElementById("demo").innerHTML = s;
    </script>
</body>
</html>

  • 示例代码，数组转换

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var arr = [
            {"name":"张三","address":"河南","age":30},
            {"name":"李四","address":"湖北","age":35}
        ];
        var s = JSON.stringify(arr);
        document.getElementById("demo").innerHTML = s;
    </script>
</body>
</html>
日期异常
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        // 创建一个对象
        var obj = {"name":"小哼","createDate":new Date(),"age":25};
        // 对象转字符串
        var s = JSON.stringify(obj);
        document.getElementById("demo").innerHTML = s;
    </script>
</body>
</html>

注意：将对象转换成了字符串，可以利用parse再转成对象

解析函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
      var obj = {"name":"小哼","age":function (){return 25}};
      // 函数转换字符串
      obj.age = obj.age.toString();
      var s = JSON.stringify(obj);
      document.getElementById("demo").innerHTML = s;
    </script>
</body>
</html>

注意：函数转换字符串-使用 toString() 方法

JSON解析器

  • 概述：eval() 函数可将 JSON 文本转换成 JavaScript 对象

  • 语法

    var obj = eval("(" + text + ")");

  • 示例代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        // JSON 文本
        var text = '{"student":[\n' +
            '    {"name":"张三","address":"河南","age":20},\n' +
            '    {"name":"李四","address":"北京","age":25},\n' +
            '    {"name":"王五","address":"上海","age":30}\n' +
            ']}';
        // 调用 eval 函数，将 JSON 字符串转换成 JavaScript 对象
        var obj = eval("("+ text +")");
        document.getElementById("demo").innerHTML += obj.student[0].name;
        document.getElementById("demo").innerHTML += obj.student[1].address;
    </script>
</body>
</html>
小哼快跑
关注
  • 28
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSON详解及示例适于各个阶段学习
12-07
详细的JSON介绍。 里面包含3、4个文件，详细介绍了JSON，希望大家下载学习
Java使用JSONPath解析JSON完整内容详解
10-15
主要介绍了Java使用JSONPath解析JSON完整内容详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JSON使用示例
ligare的博客
06-21 1万+
1——什么是json?JSON，说白了就是JavaScript用来处理数据的一种格式，这种格式非常简单易用。JSON支持的语言非常多，包括JavaScript、C#、PHP、Java等等，这是由于JSON是独立于语言的轻量级的数据交换格式。2——json的两种格式：1.对象结构（键值对）无序对象结构是使用大括号“{}”括起来的，大括号内是由0个或多个用英文逗号分隔的“关键字:值”对（key:value）构成的。语法： jsonObj指的是json对象。2.数组结构 有序JSON数组结构是用中括号“[]”
SpringMVC之Json交互处理(五)
qq_50231389的博客
06-17 172
SpringMVC之Json 什么是JSON？ JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式，目前使用特别广泛。 采用完全独立于编程语言的文本格式来存储和表示数据。 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。 在 JavaScript 语言中，一切都是对象。因此，任何JavaScript 支持的类型都可以通过 JSON 来表示，
批量处理：读取文件夹，将json文件转化为txt文件
热门推荐
dally2的博客
06-14 1万+
批量处理文件。读取文件夹，将json文件转化为txt文件，即将JSON的关键数据读出，
gson使用在android使用例子
j2ee的学习
06-01 101
虽然android自带了json处理，但是没有封装，总觉得不方便，网上找了gson的处理，觉得还行。 //转换器 GsonBuilder builder = new GsonBuilder(); // 不转换没有 @Expose 注解的字段 builder.excludeFieldsWithoutExposeAnnotation(); ...
tsconfig.json配置详解
11-26
使用tsconfig.json 不带任何输入文件的情况下调用tsc，编译器会从当前目录开始去查找tsconfig.json文件，逐级向上搜索父目录。 不带任何输入文件的情况下调用tsc，且使用命令行参数–project（或-p）指定一个包含...
VS Code Node.js 调试器（debugger）的 launch.json 配置详解（示例代码讲解）.rar
03-28
VS Code Node.js 调试器（debugger）的 launch.json 配置详解（示例代码讲解）.rar VS Code Node.js 调试器的 launch.json 配置详解： launch.json 文件用于配置 VS Code 的调试器。当我们想要使用 VS Code 来调试...
json示例代码
05-05
json示例.
JSON例子
04-21
NULL 博文链接：https://hzxlb910.iteye.com/blog/1913969
echarts 官方示例 json文件-CSDN下载
02-24
echarts 官方示例 json文件,全国各个地市，省份的getJson文件
json文件读写实例
07-27
使用json-lib对json文件进行解析，自己做的实例，主要是写入json文件，包含五个jar包都在里面。
MySQL5.7 JSON类型使用详解
12-16
JSON是一种轻量级的数据交换格式，采用了独立于语言的文本格式，类似XML，但是比XML简单，易读并且易编写。...示例表结构： CREATE TABLE json_test( id INT, person_desc TEXT )ENGINE INNODB; 我们来插入一条记录：
JSON字符串
chenjing_1qaz的博客
08-15 885
现在越来越多的项目和开发插件等默认都会支持和使用json数据格式，作为数据保持、传输的一种方式。 说是其中一种，就标示还有好多其他格式。比如：最多是xml。webservice的标准数据格式。 不过由于json是JavaScript 对象表示法（JavaScript Object Notation），天生就对js支持很好， 所以现在很多的ajax等都使用json，反而会更好处理一些。 1、定义 什...
JSON简介
weixin_50298808的博客
12-25 1076
JSON的使用
JsonObject 和JsonArray用法进行梳理和讲解[史上复杂的JSON字符串例子来讲解]
m0_49303490的博客
06-22 2072
JsonObject 和JsonArray用法进行梳理和讲解
JSON解析示例
huwan12345的博客
06-25 380
1、范例一：     "result": true,     "resultData": {         "inviteTip": "邀请人领取5000元新人大礼包",         "invitedTip": "邀请别人获取100元返现",         "rewardRule": "这是一个好规则，不信你看"     } } try {                
@JsonFormat 使用详解
最新发布
03-13
@JsonFormat 是一个注解，用于在 Java 对象与 JSON 之间进行序列化和反序列化时，控制日期格式的显示。它可以应用于类、字段或方法上。 使用 @JsonFormat 注解可以指定日期的格式、时区、语言等属性，以便在序列化和反序列化过程中对日期进行格式化和解析。下面是一些常用的属性： 1. pattern：指定日期的格式，例如 "yyyy-MM-dd HH:mm:ss"。 2. timezone：指定时区，默认为系统默认时区。 3. locale：指定语言环境，默认为系统默认语言环境。 4. shape：指定日期的显示形式，有以下几种取值： - Shape.STRING：将日期格式化为字符串。 - Shape.NUMBER：将日期格式化为时间戳。 - Shape.ARRAY：将日期格式化为数组，数组元素依次为年、月、日、时、分、秒。 - Shape.OBJECT：将日期格式化为对象，对象属性依次为年、月、日、时、分、秒。 使用示例： ```java @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8") private Date createTime; ``` 上述代码中，createTime 字段的日期格式为 "yyyy-MM-dd HH:mm:ss"，时区为 GMT+8。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值