码创造者

这个屌丝很懒，什么也没留下！

热门标签

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

作者：码创造者 | 2024-08-17 03:45:54

踩

前端解析json

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

1.单数字时:

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

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

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

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

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

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

{“age”:23} 相当于为age=23。
至于修改和删除，添加等操作，用下面的对象来解释。这里暂时不解释了。

三.二字符串类型

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

1
2
3
4

如果将后面的字符串值去掉"" ,即

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

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

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

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

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

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

三.三布尔类型值 true,false

            var obj={"sex":true};
		if(obj.sex){
			console.log("性别是男");
		}else{
			console.log("性别是女");
		}
1
2
3
4
5
6

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

性别是男

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

有的说，将true 变成"false", 是字符串类型的，为什么还打印输出呢?

//定义成json对象，用{} 拓起来
		var obj={"sex":"false"};
		if(obj.sex){
			console.log("性别是男");
		}else{
			console.log("性别是女");
		}
1
2
3
4
5
6
7

这个时候，输出的是：

性别是男

性别也是男，并不是女。因为这个时候，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));
1
2

string
性别是男

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

            if("false"){
			console.log("性别是男"); //输出为男
		}else{
			console.log("性别是女");
		}
1
2
3
4
5

如果想让其判断为女，那么就需要用字符串去判断条件了。 (以下均不截图了)


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

三.四值为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, 显示为没有钱
		}
1
2
3
4
5
6
7
8
9

四值为单个对象 {} (即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);
1
2
3
4
5
6

两个蝴蝶飞 24 男

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

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

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

即现在后面的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);//是找不到男这个值 的。不出错，也不会显示
1
2
3
4
5
6
7

关于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);
1
2
3
4
5
6
7
8

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

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

                var obj={};
		obj.name="两个蝴蝶飞";
		obj.age=24;
		obj.sex="男";
		$("#name").text(obj.name);
		$("#age").text(obj.age);
		$("#sex").text(obj.sex);
1
2
3
4
5
6
7

四.四修改对象属性

	//定义成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);
1
2
3
4
5
6
7
8

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

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

四.五删除对象属性

//定义成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);
1
2
3
4
5
6
7
8

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

如果是:

       //删除obj
		delete obj;
1
2

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

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

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

五.一单值数组

放置同一种类型的

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
1
2
3
4
5

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

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

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

也可以放置对象类型

//定义成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
1
2
3
4
5

五.二对象数组

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

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

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

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

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

五.三对象数组的输出

第一种形式输出:

       // 第一种形式
		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);
		}
1
2
3
4
5
6
7

第二种形式输出:

                // 第二种形式
		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
2
3
4
5
6
7

上面是JSON常见的两种形式输出，当成Jquery进行整合之后，可以用Jquery的循环遍历进行输出


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

六 JSON形式字符串复杂格式

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

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

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

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

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

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

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

var obj= JSON.parse(result)
var obj= $.parseJSON(result)
var obj=eval(‘(’ + result + ‘)’);

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

谢谢!!!

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/991054

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

一. 一 JSON的简单概述

二 JSON与XML的区别

二.一 与 XML 相同之处

二.二 与 XML 不同之处

二.三 Ajax方面具体说明

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

三.一 数字类型

三.二 字符串类型

三.三 布尔类型值 true,false

三.四 值为null

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

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

四.三 添加对象属性

四.四 修改对象属性

四.五 删除对象属性

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

五.一 单值数组

五.二 对象数组

五.三 对象数组的输出