JSON概述以及使用

1，JSON

1.1 概述

==概念：JavaScript Object Notation。JavaScript 对象表示法.==

如下是 JavaScript 对象的定义格式：

{name:"zhangsan",age:23,city:"北京"
}

接下来我们再看看 JSON 的格式：

{"name":"zhangsan","age":23,"city":"北京"
}

通过上面 js 对象格式和 json 格式进行对比，发现两个格式特别像。只不过 js 对象中的属性名可以使用引号（可以是单引号，也可以是双引号）；而 json 格式中的键要求必须使用双引号括起来，这是 json 格式的规定。json 格式的数据有什么作用呢？

作用：由于其语法格式简单，层次结构鲜明，现多用于作为==数据载体==，在网络中进行数据传输。如下图所示就是服务端给浏览器响应的数据，这个数据比较简单，如果现需要将 JAVA 对象中封装的数据响应回给浏览器的话，应该以何种数据传输呢？

大家还记得 ajax 的概念吗？ 是 ==异步的 JavaScript 和 xml==。这里的 xml就是以前进行数据传递的方式，如下：

<student><name>张三</name><age>23</age><city>北京</city>
</student>

再看 json 描述以上数据的写法：

{   "name":"张三","age":23,"city":"北京"
}

上面两种格式进行对比后就会发现 json 格式数据的简单，以及所占的字节数少等优点。

1.2 JSON 基础语法

1.2.1 定义格式

JSON 本质就是一个字符串，但是该字符串内容是有一定的格式要求的。 定义格式如下：

var 变量名 = '{"key":value,"key":value,...}';

JSON 串的键要求必须使用双引号括起来，而值根据要表示的类型确定。value 的数据类型分为如下

  • 数字（整数或浮点数）

  • 字符串（使用双引号括起来）

  • 逻辑值（true或者false）

  • 数组（在方括号中）

  • 对象（在花括号中）

  • null

示例：

var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
1.2.2 代码演示

创建一个页面，在该页面的 <script> 标签中定义json字符串

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//1. 定义JSON字符串var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'alert(jsonStr);
​
</script>
</body>
</html>

通过浏览器打开，页面效果如下图所示

现在我们需要获取到该 JSON 串中的 name 属性值，应该怎么处理呢？

如果它是一个 js 对象，我们就可以通过 js对象.属性名 的方式来获取数据。JS 提供了一个对象 JSON ，该对象有如下两个方法：

  • parse(str) ：将 JSON串转换为 js 对象。使用方式是： ==var jsObject = JSON.parse(jsonStr);==

  • stringify(obj) ：将 js 对象转换为 JSON 串。使用方式是：==var jsonStr = JSON.stringify(jsObject)==

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//1. 定义JSON字符串var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'alert(jsonStr);
​//2. 将 JSON 字符串转为 JS 对象let jsObject = JSON.parse(jsonStr);alert(jsObject)alert(jsObject.name)//3. 将 JS 对象转换为 JSON 字符串let jsonStr2 = JSON.stringify(jsObject);alert(jsonStr2)
</script>
</body>
</html>
1.2.3 发送异步请求携带参数

后面我们使用 axios 发送请求时，如果要携带复杂的数据时都会以 JSON 格式进行传递，如下

axios({method:"post",url:"http://localhost:8080/ajax-demo/axiosServlet",data:"username=zhangsan"
}).then(function (resp) {alert(resp.data);
})

请求参数不可能由我们自己拼接字符串吧？肯定不用，可以提前定义一个 js 对象，用来封装需要提交的参数，然后使用 JSON.stringify(js对象) 转换为 JSON 串，再将该 JSON 串作为 axios 的 data 属性值进行请求参数的提交。如下：

var jsObject = {name:"张三"};
​
axios({method:"post",url:"http://localhost:8080/ajax-demo/axiosServlet",data: JSON.stringify(jsObject)
}).then(function (resp) {alert(resp.data);
})

而 axios 是一个很强大的工具。我们只需要将需要提交的参数封装成 js 对象，并将该 js 对象作为 axios 的 data 属性值进行，它会自动将 js 对象转换为 JSON 串进行提交。如下：

var jsObject = {name:"张三"};
​
axios({method:"post",url:"http://localhost:8080/ajax-demo/axiosServlet",data:jsObject  //这里 axios 会将该js对象转换为 json 串的
}).then(function (resp) {alert(resp.data);
})

==注意：==

  • js 提供的 JSON 对象我们只需要了解一下即可。因为 axios 会自动对 js 对象和 JSON 串进行想换转换。

  • 发送异步请求时，如果请求参数是 JSON 格式，那请求方式必须是 POST。因为 JSON 串需要放在请求体中。

1.3 JSON串和Java对象的相互转换

学习完 json 后，接下来聊聊 json 的作用。以后我们会以 json 格式的数据进行前后端交互。前端发送请求时，如果是复杂的数据就会以 json 提交给后端；而后端如果需要响应一些复杂的数据时，也需要以 json 格式将数据响应回给浏览器。

在后端我们就需要重点学习以下两部分操作：

  • 请求数据：JSON字符串转为Java对象

  • 响应数据：Java对象转为JSON字符串

接下来给大家介绍一套 API，可以实现上面两部分操作。这套 API 就是 Fastjson

1.3.1 Fastjson 概述

Fastjson 是阿里巴巴提供的一个Java语言编写的高性能功能完善的 JSON 库，是目前Java语言中最快的 JSON 库，可以实现 Java 对象和 JSON 字符串的相互转换。

1.3.2 Fastjson 使用

Fastjson 使用也是比较简单的，分为以下三步完成

  1. 导入坐标

    <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.62</version>
</dependency>

  2. Java对象转JSON

    String jsonStr = JSON.toJSONString(obj);

    将 Java 对象转换为 JSON 串，只需要使用 Fastjson 提供的 JSON 类中的 toJSONString() 静态方法即可。

  3. JSON字符串转Java对象

    User user = JSON.parseObject(jsonStr, User.class);

    将 json 转换为 Java 对象，只需要使用 Fastjson 提供的 JSON 类中的 parseObject() 静态方法即可。

1.3.3 代码演示

  • 引入坐标

  • 创建一个类，专门用来测试 Java 对象和 JSON 串的相互转换，代码如下：

    public class FastJsonDemo {
​public static void main(String[] args) {//1. 将Java对象转为JSON字符串User user = new User();user.setId(1);user.setUsername("zhangsan");user.setPassword("123");
​String jsonString = JSON.toJSONString(user);System.out.println(jsonString);//{"id":1,"password":"123","username":"zhangsan"}
​
​//2. 将JSON字符串转为Java对象User u = JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}", User.class);System.out.println(u);}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/442499.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C++文件操作（1）

C++文件操作（1）

C文件操作 1.文本的写入及读取文本文件写入文本文件读取 2.二进制文件的写入及读取二进制文件写入二进制文件读取 3.小结 C也有处理文件的能力&#xff0c;其功能实现依赖文件流。文件流是C中用来处理文件输入输出的一种流类。文件流可以用于从文件中读取数据或将数据写入到文件…
阅读更多...
uni-app小程序自定义导航栏

uni-app小程序自定义导航栏

最近在开发一个uni-app小程序&#xff0c;用到了自定义导航栏&#xff0c;在这里记录一下实现过程&#xff1a; page.json 在对应页面路由的style中设置入"navigationStyle": "custom"取消原生导航栏&#xff0c;自定义导航栏 {"path": "…
阅读更多...
【ARM Trace32(劳特巴赫) 使用介绍 6.1 -- 外设寄存器查看与修改】

【ARM Trace32(劳特巴赫) 使用介绍 6.1 -- 外设寄存器查看与修改】

请阅读【Trace32 ARM 专栏导读】 文章目录 外设寄存器查看与修改寄存器值修改外设寄存器查看与修改 外设寄存器的查看与修改，离不开TRACE32的外设文件(*.per)，per文件一般存在于TRACE32的安装根目录下。 一般情况下，在调试时，TRACE32会根据当前选择的芯片名自动选择合适的…
阅读更多...
正则表达式（RE）

正则表达式（RE）

什么是正则表达式 正则表达式&#xff0c;又称规则表达式&#xff08;Regular Expression&#xff09;。正则表达式通常被用来检索、替换那些符合某个规则的文本 正则表达式的作用 验证数据的有效性替换文本内容从字符串中提取子字符串 匹配单个字符 字符功能.匹配任意1个…
阅读更多...
P1596 [USACO10OCT] Lake Counting S Flood Fill算法（洪水填充算法）

P1596 [USACO10OCT] Lake Counting S Flood Fill算法（洪水填充算法）

文章目录 题目链接题目描述解题思路算法原理实现方法复杂度分析 代码实现总结 题目链接 链接: P1596 [USACO10OCT] Lake Counting S 题目描述 解题思路 本题我在acwing和洛谷上都看到了 做这道题首先要了解一下Flood Fill 算法&#xff08;洪水填充算法&#xff09; 作为一个…
阅读更多...
数据库MySQL查询设计||给定四个关联表，其定义和数据加载如下：-- 学生表 Student-- 选课表 SC

数据库MySQL查询设计||给定四个关联表，其定义和数据加载如下：-- 学生表 Student-- 选课表 SC

SQL查询设计 给定四个关联表&#xff0c;其定义和数据加载如下&#xff1a; -- 学生表 Student create table Student(Sno varchar(6), Sname varchar(10), Sdate datetime, Ssex varchar(10)); insert into Student values(01 , 赵雷 , 1999-01-01 , 男); insert into St…
阅读更多...
重发布

重发布

一&#xff1a;作用 在两种路由协议之间&#xff0c;或者一个协议的不同进程之间&#xff0c;借助ASBR &#xff08;同时工作在两种协议或 者协 议的不同进程中&#xff09;学习到两个网络的路由信息&#xff0c;并且通过重发布进行路由共享&#xff0c;最终实现全网可 达。…
阅读更多...
tarojs View多行文本无法换行问题解决

tarojs View多行文本无法换行问题解决

问题&#xff1a;未换行 code&#xff1a; 解决&#xff1a; 加上换行属性的css就好了 white-space: break-spaces;
阅读更多...
（十一）springboot实战——springboot3下关于WebFlux项目的一些常用功能整合

（十一）springboot实战——springboot3下关于WebFlux项目的一些常用功能整合

前言 本节内容主要是对webflux项目一些常用功能的介绍&#xff0c;例如系统集成swagger接口文档&#xff0c;方便接口测试以及前后端项目联调测试&#xff1b;使用actuator完成系统各种指标的监控功能&#xff1b;系统使用logback日志框架完成项目日志的收集&#xff1b;使用过…
阅读更多...
【python】在python中使用单元测试unittest

【python】在python中使用单元测试unittest

在python中使用单元测试unittest 大家好&#xff0c;欢迎来到我的技术乐园&#xff01;今天&#xff0c;我们将一起踏入Python单元测试的奇妙旅程&#xff0c;探索这个让我们的代码更可靠、更强壮的令人愉快的世界。 前言&#xff1a;为什么单元测试如此重要&#xff1f; 在我…
阅读更多...
互联网加竞赛 基于深度学习的人脸表情识别

互联网加竞赛 基于深度学习的人脸表情识别

文章目录 0 前言1 技术介绍1.1 技术概括1.2 目前表情识别实现技术 2 实现效果3 深度学习表情识别实现过程3.1 网络架构3.2 数据3.3 实现流程3.4 部分实现代码 4 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的人脸表情识别 该项目较…
阅读更多...
StarRocks -- 基础概念(数据模型及分区分桶)

StarRocks -- 基础概念(数据模型及分区分桶)

1. 数据模型 StarRocks提供四种数据模型&#xff1a; Duplicate Key, Aggregate Key, Unique Key, Primary Key 1.1 Duplicate Key 适用场景&#xff1a; 分析原始数据&#xff0c;如原始日志和原始操作记录。可以使用多种方法查询数据&#xff0c;不受预聚合方法的限制。加…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023