JSON简介及前端简单解析(一)

news2024/11/13 12:49:28

JSON现在常用来做前后端数据交互，两个蝴蝶飞只是简单的对JSON做一下讲解和简单使用。关于JSON,我还了解的远远不够。由于本人经验有限，嘴皮子不溜，所以学术性，概念性，底层性的知识点暂时不做介绍。文章中有错误之处，欢迎拍砖和指点。特别感谢"菜鸟教程 “（所举例子和思路大部分改编于此）和"JSON官网”（图片来源），所有的资料大部分是两者提供，为了方便书写，故不一一指名出处，请谅解，非常抱歉。

一. 一 JSON的简单概述

JSON,全称是JavaScript Object Natotion(JavaScript 对象表示法)，是存储和交换文本信息的语法。与XML类似。但JSON 比 XML 更小、更快，更易解析。是轻量级的，且具有自我描述性，更好地理解。

JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。

JSON从描述上看，是Java Script对象的表示法，所以与Java Script有非常密切的联系。JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。

JSON文件的后缀名是.json, MIME类型为: application/json。

MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。

二 JSON与XML的区别

二.一 与 XML 相同之处

JSON 是纯文本
JSON 具有"自我描述性"（人类可读）
JSON 具有层级结构（值中存在值）
JSON 可通过 JavaScript 进行解析
JSON 数据可使用 AJAX 进行传输

二.二 与 XML 不同之处

没有结束标签
更短
读写的速度更快
能够使用内建的 JavaScript eval() 方法进行解析
使用数组
不使用保留字

二.三 Ajax方面具体说明

对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：

使用 XML (在数据消息交互方面，用XML过多)

读取 XML 文档
使用 XML DOM 来循环遍历文档
读取值并存储在变量中
使用 JSON (在数据传递方面,特别是前后台数据交互方面)

读取 JSON 字符串
用 eval() 处理 JSON 字符串

三 JSON的单值处理 （均用JSP讲解，故要创建一个Web动态工程(eclipse)）

JSON的单值处理方式很简单， 就是简单的{key:value} 形式,且只有这一个。 用{} 进行括起来。相当于key=value形式。

其中key值表示的是key,value表示的是值。 类似于Map键值对的方式。 其中value可以取值的类型有:

有字符串类型，数字类型，布尔类型(true,false),null 和对象类型，数组类型，(下面会单独讲，意思是可以互相嵌套)。

三.一 数字类型

在index.jsp页面中，创建一个简单的JSON的页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-3.1.0.min.js"></script>
<title>两个蝴蝶飞对JSON的不深入了解</title>
<script>
	$(function(){
		//写具体的操作
	})
</script>
</head>
<body>
	<h2>关于JSON的学习</h2>
	<div id="myjson">
		<span id="single"></span>
		<span id="name"></span>
		<span id="age"></span>
		<span id="sex"></span>
	</div>
</body>
</html>

1.单数字时:

       //定义成json对象，用{} 拓起来
		var obj={"age":23};
		$("#age").text(obj.age);

2.也可以将23用双引号括起来，即

var obj={"age":"23"};
		$("#age").text(obj.age);

但这个时候，表示的是字符串23,并不是数字23.

3.也可以将age不括起来，即

var obj={age:"23"};
		$("#age").text(obj.age);

  1. {“age”:23} 相当于为age=23。

  2. 至于修改和删除，添加等操作，用下面的对象来解释。这里暂时不解释了。

三.二 字符串类型

            //定义成json对象，用{} 拓起来
		var obj={"name":"两个蝴蝶飞"};
		$("#name").text(obj.name);

  1. 如果将后面的字符串值去掉"" ,即
var obj={"name":两个蝴蝶飞};
		$("#name").text(obj.name);

这样会报错的，页面上也不会显示出值。 所以，如果value是非数字类型，那么应该用"" 括起来。

不要以为没有弹出框就不是报错，用F12打开开发者模式看一下


3. 现在取出的值是obj.name, 如果写错了，即写成obj.age, 并不存在的值，

var obj={"name":"两个蝴蝶飞"};
		$("#name").text(obj.age);

页面上不会报错，但什么东西都不会显示的

三.三 布尔类型值 true,false

            var obj={"sex":true};
		if(obj.sex){
			console.log("性别是男");
		}else{
			console.log("性别是女");
		}

里面的true为布尔类型值，刷新页面，控制台输出:

性别是男

可以取出值来直接放在if中进行判断。

  1. 有的说，将true 变成"false", 是字符串类型的，为什么还打印输出呢?
//定义成json对象，用{} 拓起来
		var obj={"sex":"false"};
		if(obj.sex){
			console.log("性别是男");
		}else{
			console.log("性别是女");
		}

这个时候，输出的是：

性别是男

性别也是男，并不是女。 因为这个时候，false为字符串值。 obj.sex时，取出的是字符串类型的false。 所以仍然打印性别是男。 (js判断if条件为false的情况:

逻辑对象无初始值或者其值为 0、-0、null、“”、false、undefined 或者 NaN，那么if判断 false ，其他为true

字符串类型的false,与布尔类型的false,并不一样。

var obj={"sex":"false"};
		console.log(typeof(obj.sex));

string
性别是男

上面的例子也就是: (以下均不截图了)

            if("false"){
			console.log("性别是男"); //输出为男
		}else{
			console.log("性别是女");
		}
  1. 如果想让其判断为女，那么就需要用字符串去判断条件了。 (以下均不截图了)

//定义成json对象，用{} 拓起来
		var obj={"sex":"false"};
		console.log(typeof(obj.sex));
		if(obj.sex!="false"){
			console.log("性别是男");
		}else{
			console.log("性别是女"); //输出性别是女
		}

三.四 值为null

//定义成json对象，用{} 拓起来
		var obj={"money":null};
		console.log("类型是:"+typeof(obj.money));  //object
		console.log(obj.money); //null, 并不是什么都不显示
		if(obj.money){
			console.log("有钱");
		}else{
			console.log("没有钱"); //null为false, 显示为没有钱
		}

四 值为单个对象 {} (即Java 中JavaBean形式)

上面只有一个属性，很难表示一个对象的完整信息，也是无法表示出来的。 故可以在{} 封装多个对象。 单个值表示也是用:进行分隔，但值与值之间用,进行分隔。

//定义成json对象，用{} 拓起来
		var obj={"name":"两个蝴蝶飞","age":24,"sex":"男"};
		console.log("类型:"+typeof(obj));  //为object
		$("#name").text(obj.name);
		$("#age").text(obj.age);
		$("#sex").text(obj.sex);

两个蝴蝶飞 24 男

在取值的时候，只要相应的.key就行了。

四.二 有人说，会见过这种模式,

var obj={"person":{"name":"两个蝴蝶飞","age":24,"sex":"男"}};

即现在后面的value值，并不是单纯的一个数字，而是一个对象。 这种表示实际上三.四 两种方式的结合使用。{“person”:value},

value是一个单个对象。

这个时候取值只要将前面的person带上即可。 先找到对应的key(person), 找到Key之后，继续找里面的key。 嵌套使用


//定义成json对象，用{} 拓起来
		var obj={"person":{"name":"两个蝴蝶飞","age":24,"sex":"男"}};
		console.log("类型:"+typeof(obj));  //为object
		$("#name").text(obj.person.name); //正常取的方式,这种才会显示(采用)
		$("#age").text(obj.person.money); //没有money值，不出错，但也不会显示
		$("#sex").text(obj.sex);//是找不到男这个值 的。不出错，也不会显示

关于JSON的学习
两个蝴蝶飞

四.三 添加对象属性


                var obj={"name":"两个蝴蝶飞","age":24,"sex":"男"};
		console.log("类型:"+typeof(obj));
		//添加一个对象属性为money
		obj.money="新添加的money属性";
		$("#name").text(obj.money); //取出的值为:新添加的money属性
		$("#age").text(obj.age);
		$("#sex").text(obj.sex);

让JSON对象新.一个要添加的属性即可。 即obj.name=“要添加的值”;

所以有的时候，如果添加的层次较多的话，可以这样添加.

                var obj={};
		obj.name="两个蝴蝶飞";
		obj.age=24;
		obj.sex="男";
		$("#name").text(obj.name);
		$("#age").text(obj.age);
		$("#sex").text(obj.sex);

四.四 修改对象属性

	//定义成json对象，用{} 拓起来
		var obj={"name":"两个蝴蝶飞","age":24,"sex":"男"};
		console.log("类型:"+typeof(obj));
		//修改名称的值  直接用=号
		obj.name="两个蝴蝶飞啊飞啊";  
		$("#name").text(obj.name);  //取出的值为:两个蝴蝶飞啊飞啊
		$("#age").text(obj.age);
		$("#sex").text(obj.sex);

修改对象用取出的值=“新值”; 即可。

要改变的值存在的话，为修改。 不存在的话， 为添加。

四.五 删除对象属性

//定义成json对象，用{} 拓起来
		var obj={"name":"两个蝴蝶飞","age":24,"sex":"男"};
		console.log("类型:"+typeof(obj));
		//删除一个属性
		delete obj.age;
		$("#name").text(obj.name);
		$("#age").text(obj.age); // 被删除了，无法取出
		$("#sex").text(obj.sex);

这个时候，就会删除掉age这个属性。

如果是:

       //删除obj
		delete obj;

这个时候，是并不会删除的obj对象的。 obj.name,obj.age,obj.sex是依旧可以取出的。只能 delete 对象.属性。

五 数组对象 Array 用[ ]括起来,用索引取出值

简单来说，常见的数组对象可以分为两种，第一种，是单值的情况。第二种，是对象情况。

五.一 单值数组

  1. 放置同一种类型的

var obj=[12,24,36,48];
取出值时，用索引下标进行取出。

     //定义成json数组对象，用[]拓起来
		var obj=[12,24,36,48];
		console.log(obj[0]); //12
		console.log(obj[obj.length-1]); //48
		console.log(obj[obj.length]);//undefined

2 .其中，放置的值可以为同一个类型的，也可以为不同的类型的。

//定义成json数组对象，用[]拓起来
		var obj=["两个蝴蝶飞",24,false,true,null,"男"];
		console.log(obj[0]); //两个蝴蝶飞
		console.log(obj[obj.length-1]);//男
		console.log(obj[obj.length]);//undefined

这里面的值有字符串，数字，布尔值，还有null。

  1. 也可以放置对象类型
//定义成json数组对象，用[]拓起来
		var obj=["两个蝴蝶飞",24,false,true,null,{'name':'两个蝴蝶飞','age':24,'sex':'男'}];
		console.log(obj[0]);//两个蝴蝶飞
		console.log(obj[obj.length-1].name);//两个蝴蝶飞
		console.log(obj[obj.length-1].age);//24

五.二 对象数组

里面的值放置多个对象，是第一种单值的变形体。很常用的一种方式 (即Java 中List 形式)

当然里面也可以进行嵌套，但这里只是简单的形式。

   var obj = [
			{'name':'慧芳','age':28,'sex':'女'}, 
			{'name':'莉莉','age':26,'sex':'女'}, 
			{'name':'两个蝴蝶飞','age':24,'sex':'男'}
		];

一般常见写成key:value 形式，即将array写成value形式

     var obj = {"persons":
			[{'name':'慧芳','age':28,'sex':'女'}, 
			{'name':'莉莉','age':26,'sex':'女'}, 
			{'name':'两个蝴蝶飞','age':24,'sex':'男'}]
		};

五.三 对象数组的输出

第一种形式输出:

       // 第一种形式
		for(var i=0;i<obj.persons.length;i++){
			// 不要写成 var p=obj.persons[i], 然后p.name (这是错误的)
			console.log(obj.persons[i].name);
			console.log(obj.persons[i].age);
			console.log(obj.persons[i].sex);
		}

第二种形式输出:

                // 第二种形式
		for(var p in obj.persons){
			//都是先取出obj.persons[p]
			console.log(obj.persons[p].name);
			console.log(obj.persons[p].age);
			console.log(obj.persons[p].sex);
		}
  1. 上面是JSON常见的两种形式输出，当成Jquery进行整合之后，可以用Jquery的循环遍历进行输出

 // 第三种形式, each形式循环遍历输出       
$.each(obj.persons,function(n,value){
			console.log(value.name);
			console.log(value.age);
			console.log(value.sex);
		})

六 JSON形式字符串复杂格式

json对象之间可以相互的嵌套，可以对象与数组嵌套，也可以对象与单值嵌套，也可以单值与数组进行嵌套。

有时候，嵌套的时候很容易出错。 可以利用工具进行相应的解析和验证。

推荐菜鸟教程的工具: https://c.runoob.com/front-end/53 和: http://www.bejson.com/

在解析的时候，也要慢慢的进行相应的解析，层层进行解析。

七 JSON对象与JSON字符串之间相互转换

七.一 JSON对象转换成JSON字符串

1.  var result=JSON.stringify(obj);

七.二 JSON字符串转换成JSON对象

  1. var obj= JSON.parse(result)

  2. var obj= $.parseJSON(result)

  3. var obj=eval(‘(’ + result + ‘)’);

在解析和遍历时，要注意嵌套的顺序。

谢谢!!!

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

QT中资源文件resourcefile的使用，使用API完成页面布局

QT中资源文件resourcefile的使用，使用API完成页面布局

QT中资源文件resourcefile的使用 之前添加图标的方法使用资源文件的方法创建资源文件资源文件添加前缀资源文件添加资源使用资源文件中的资源 使用API完成布局使用QHBoxLayout完成水平布局使用QVBoxLayout完成垂直布局使用QGridLayout完成网格布局 在Qt中引入资源文件好处在于他…
阅读更多...
设计模式之创建者模式

设计模式之创建者模式

文章目录 一、介绍二、应用三、案例1. 麦当劳11随心配2. 代码演示3. 演示结果 四、优缺点五、送给读者 一、介绍 建造者模式(Builder Pattern)属于创建型设计模式&#xff0c;很多博客文章的对它的作用解释为用于将复杂对象的创建过程与其细节表示分离。但对于初学者来说&…
阅读更多...
设计模式原则及分类

设计模式原则及分类

一、概念 设计模式&#xff1a;&#xff08;Design pattern&#xff09;是前辈们对代码开发经验的总结&#xff0c;是解决特定问题的一系列套路。用来提高代码可复用性、可维护性、可读性、稳健性以及安全性。 二、设计模式原则&#xff1a; 单一职责原则&#xff08;Single …
阅读更多...
易思智能物流无人值守系统文件上传漏洞复现

易思智能物流无人值守系统文件上传漏洞复现

0x01 产品简介 易思无人值守智能物流系统是一款集成了人工智能、机器人技术和物联网技术的创新产品。它能够自主完成货物存储、检索、分拣、装载以及配送等物流作业&#xff0c;帮助企业实现无人值守的智能物流运营&#xff0c;提高效率、降低成本&#xff0c;为现代物流行业带…
阅读更多...
【算法日志】贪心算法刷题：重叠区问题(day31)

【算法日志】贪心算法刷题：重叠区问题(day31)

代码随想录刷题60Day 目录 前言 无重叠区间&#xff08;筛选区间&#xff09; 划分字母区间&#xff08;切割区间&#xff09; 合并区间 前言 今日的重点是掌握重叠区问题。 无重叠区间&#xff08;筛选区间&#xff09; int eraseOverlapIntervals(vector<vector<in…
阅读更多...
CST HFSS MATLAB参数方程定义曲面绘制

CST HFSS MATLAB参数方程定义曲面绘制

CST HFSS 函数定义曲面绘制 简介环境HFSSCSTMATLAB 简介 若在柱坐标系中半径r随z和phi都会变&#xff0c;无法使用一般的方法绘制&#xff0c;这时可以使用参数方程定义的曲面来绘制。举一个例子如下&#xff0c; r 100 0.5 ( c o s ( 0.2 ∗ p i ∗ z ) − 1 ) c o s ( φ …
阅读更多...
Day16-蜗牛影城后端开发

Day16-蜗牛影城后端开发

蜗牛影城后端开发 一 多表关联查询 电影集合movie的type(类别)字段关联到电影类别movieType表的_id(主键) 二 蜗牛影城后端开发 1 数据的导入导出 2 用户模块 UserModel.js //导入mongoose,并解构出Schema(类)和model(对象) const {Schema,model} =
阅读更多...
Android进阶之路 - EditText输入字体自适应

Android进阶之路 - EditText输入字体自适应

遇到这么一个需求&#xff1a;“控件宽度有限&#xff0c;随着输入内容&#xff0c;动态修改字体大小”&#xff0c;如果是你&#xff0c;只如何来实现&#xff1f;又有几种方式&#xff1f; 嗯&#xff0c;就是这么一个简单的需求&#xff0c;让我记录了俩篇blog Android进阶…
阅读更多...
商城-学习整理-高级-消息队列（十七）

商城-学习整理-高级-消息队列（十七）

目录 一、RabbitMQ简介(消息中间件)1、RabbitMQ简介&#xff1a;2、核心概念1、Message2、Publisher3、Exchange4、Queue5、Binding6、Connection7、Channel8、Consumer9、Virtual Host10、Broker 二、一些概念1、异步处理2、应用解耦3、流量控制5、概述 三、Docker安装RabbitM…
阅读更多...
开源全球地理空间数据可视化框架——Cesium学习（2023.8.21）

开源全球地理空间数据可视化框架——Cesium学习（2023.8.21）

Cesium学习 2023.8.21 1、Cesium简介1.1 Github上的Cesium 2、Cesium下载安装使用2.1 方式一&#xff1a;页面在线引用2.2 方式二&#xff1a;页面离线使用2.3 方式三&#xff1a;完整项目使用 3、CesiumJS学习教程&#xff08;快速上手 API文档&#xff09;3、Cesium官方示例…
阅读更多...
EasyCode代码生成MybatisPlus

EasyCode代码生成MybatisPlus

先安装插件 导入 { "author" : "wangyujie", "version" : "1.2.8", "userSecure" : "", "currTypeMapperGroupName" : "Default", "currTemplateGroupName" : "01-Mybatis-Pl…
阅读更多...
HTML a标签

HTML a标签

<a>标签定义一个超链接。它有如下主要属性&#xff1a; href&#xff1a;指定链接的地址&#xff0c;可以是一个URL、文件路径或锚点。target&#xff1a;指定链接在何处打开。其值包括&#xff1a; _blank&#xff1a;在新窗口或新标签页打开链接。_self&#xff1a;在…
阅读更多...
【笔记】Spark3 AQE(Adaptive Query Execution)

【笔记】Spark3 AQE(Adaptive Query Execution)

提效 7 倍&#xff0c;Apache Spark 自适应查询优化在网易的深度实践及改进 Performance Tuning 配置Spark SQL开启Adaptive Execution特性 How To Use Spark Adaptive Query Execution (AQE) in Kyuubi 【spark系列3】spark 3.0.1 AQE(Adaptive Query Exection)分析 玩转Spark…
阅读更多...
jmeter入门：接口压力测试全解析

jmeter入门：接口压力测试全解析

一.对接口压力测试 1.配置 1.添加线程组&#xff08;参数上文有解释 这里不介绍&#xff09; 2.添加取样器 不用解释一看就知道填什么。。。 3.添加头信息&#xff08;否则请求头对不上&#xff09; 也不用解释。。。 4.配置监听器 可以尝试使用这几个监听器。 2.聚合结果…
阅读更多...
MySQL 字符集概念、原理及如何配置 — 图文详解

MySQL 字符集概念、原理及如何配置 — 图文详解

目录 一、字符集概念 1、字符&#xff08;Character&#xff09; 2、字符编码 3、字符集&#xff08;Character set&#xff09; 二、字符集原理 1. ASCII字符集 2、GB2312 3、GBK 4、GB18030 5、BIG5 6、Unicode 编码 三、字符序 四、MySQL字符集 & 字符序 …
阅读更多...
web基础+HTTP协议+httpd详细配置

web基础+HTTP协议+httpd详细配置

目目录录 一、Web基础1.1 HTML概述1.1.1 HTML的文件结构1.1.2 HTML中的部分基本标签 1.3 MIME1.4 URI 和 URL1.4 定义1.4.2 URI 和 URL 的区别 二、静态资源和动态资源2.1 静态资源2.2 动态资源 三、HTTP协议3.1 HTTP协议简介3.2 HTTP协议版本3.2 HTTP方法3.3 HTTP请求访问的完…
阅读更多...
李宏毅机器学习笔记：结构学习，HMM，CRF

李宏毅机器学习笔记：结构学习，HMM，CRF

李宏毅机器学习笔记&#xff1a;结构学习&#xff0c;HMM&#xff0c;CRF 1、隐马尔可夫模型HMM1.1Sequence2Sequence1.2 HMM1.3 Viterbi算法1.3 HMM模型的缺点 1、隐马尔可夫模型HMM 1.1Sequence2Sequence 什么是Seq2Seq问题呢&#xff1f;简单来说&#xff0c;就是输入是一…
阅读更多...
RTSP/Onvif视频服务器EasyNVR安防视频云服务调用接口录像会被自动删除的问题解决方案

RTSP/Onvif视频服务器EasyNVR安防视频云服务调用接口录像会被自动删除的问题解决方案

EasyNVR安防视频云服务是基于RTSP/Onvif协议接入的视频平台&#xff0c;可支持将接入的视频流进行全平台、全终端的分发&#xff0c;分发的视频流包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等。平台丰富灵活的视频能力&#xff0c;可应用在智慧校园、智慧工厂、智慧水利等…
阅读更多...
Python“牵手”京东商品详情数据采集方法，京东API申请步骤说明

Python“牵手”京东商品详情数据采集方法，京东API申请步骤说明

京东平台API接口是为开发电商类应用程序而设计的一套完整的、跨浏览器、跨平台的接口规范。 京东API接口是指通过编程的方式&#xff0c;让开发者能够通过HTTP协议直接访问京东平台的数据&#xff0c;包括商品信息、店铺信息、物流信息等&#xff0c;从而实现京东平台的数据开…
阅读更多...
自动驾驶合成数据科普一：不做真实数据的“颠覆者”，做“杠杆”

自动驾驶合成数据科普一：不做真实数据的“颠覆者”，做“杠杆”

前言&#xff1a; 在7月底的一篇文章中&#xff0c;九章智驾提到&#xff0c;数据闭环能力是自动驾驶下半场的“入场券”&#xff0c;这一观点在行业内引起了广泛共鸣。 在数据闭环体系中&#xff0c;仿真技术无疑是非常关键的一环。仿真的起点是数据&#xff0c;而数据又分为真…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023