JSON入门

最新推荐文章于 2020-05-14 19:58:09 发布

hxj135812

最新推荐文章于 2020-05-14 19:58:09 发布

阅读量589

点赞数

分类专栏： JS学习文章标签： javascript easyui

本文链接：https://blog.csdn.net/hxj135812/article/details/41171779

版权

JS学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、什么是JSON?

Ø 它是JavaScript对象表示法（JavaScript Object Notation），是JavaScript的一个子集。

Ø 是轻量级的文本数据交换格式

Ø 独立与语言平台

Ø 具有自我描述，更易理解。

它是采用完全独立于语言文本格式，也使用了类似于高级语言或脚本语言的特点。这样就使得JSON成为理想的数据交换语言。易于人们理解和编写,同时也易于机器解析和生成。

2、 JSON语法

a) JSON数据：键/值的形式,json值可以是数字，字符串，逻辑值，数组，对象，null。

“name”:”胡晓洁”

“hobby”:[“跑步”，”跳舞”，”弹琴”]

“胡晓洁”：{“name”：”姓名”，”sex”：”性别”}

b) JSON对象：‘{}’保存对象

{

"people":[

{"firstName":"Brett","lastName":"McLaughlin","email":"aaa},

{"firstName":"Jason","lastName":"Hunter","email":"bbbb"},

{"firstName":"Elliotte","lastName":"Harold","email":"cccc"}

]

}

也可表示为

       Varpeople=[

       {"firstName":"Brett","lastName":"McLaughlin","email":"aaa },

       {"firstName":"Jason","lastName":"Hunter","email":"bbbb"},

       {"firstName":"Elliotte","lastName":"Harold","email":"cccc"}

]

3、 JSON与XML的不同之处

JSON文件是类似XML文件，从中可以读取和存储数据。

a)      JSON

Json语法是JS语法的子集，可以表示比"名称 / 值对"更复杂的结构。

我们常见的语法机构比较简单，用函数eval（）处理即可；这样处理速度很快；但是当结构比较复杂，我们都明确它是什么结构时处理起来就比较困难。

b)      XML

它是DOM结构的，读取其中的数据，都要遍历DOM来获得。当数据简单时，用JSON比较好，当结构复杂时用XML比较好。

c)      总结

至于用什么没有绝对的定论，只有在合适的时候选用合适的对象就是好的。但是就JSON来说Javascirp毕竟是主战场，如果预先知道JSON结构的情况下，使用JSON进行数据传递简直是太美妙了，也可以写出很实用美观可读性强的代码。

4、 JSON在easyUi控件中的应用：

添加html文件，在文件上添加easyui-datagrid控件，代码如下：

<span style="font-family:Microsoft YaHei;"><!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="demo.css">
	<script type="text/javascript" src="easyui/jquery.min.js"></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Basic DataGrid</h2>
	<p>The DataGrid is created from markup, no JavaScript code needed.</p>
	<div style="margin:20px 0;"></div>
	
	<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
			data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.aspx',method:'get'">
		<thead>
			<tr>
				<th data-options="field:'id',width:80">学生ID</th>
				<th data-options="field:'name',width:100">姓名</th>
				<th data-options="field:'sex',width:80,align:'right'">性别</th>
				<th data-options="field:'age',width:80,align:'right'">年龄</th>
				<th data-options="field:'hobby',width:250">爱好</th>
				<th data-options="field:'isMarried',width:60,align:'center'">已婚情况</th>
			</tr>
		</thead>
	</table>

</body>
</html></span>

本地文件datagrid_data1.aspx：

<span style="font-family:Microsoft YaHei;">{
	"total":5,
	"rows":[
			{"id":"0001","name":"胡晓洁","sex":"女","age":"24","hobby":"跑步","isMarried":"N"},
			{"id":"0002","name":"张三","sex":"男","age":"24","hobby":"跑步","isMarried":"N"},
			{"id":"0003","name":"小红","sex":"女","age":"24","hobby":"跑步","isMarried":"N"},
			{"id":"0004","name":"小芳","sex":"女","age":"24","hobby":"跑步","isMarried":"Y"},
			{"id":"0005","name":"李四","sex":"男","age":"24","hobby":"跑步","isMarried":"N"}
		]
	

}</span>

效果图如下：

注意：

url:读取文件中的json串，或方法中的json串。

hxj135812

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
6
评论
JSON入门

1、什么是JSON?它是采用完全独立于语言文本格式，也使用了类似于高级语言或脚本语言的特点。这样就使得JSON成为理想的数据交换语言。易于人们理解和编写,同时也易于机器解析和生成。2、 Ø 是JavaScript对象表示法（JavaScript Object Notation），是JavaScript的一个子集。Ø 是轻量级的文本数据交换格式Ø 独立与语言平台Ø
复制链接

扫一扫