JSON详解
来源:互联网 发布:广州造价数据 编辑:程序博客网 时间:2024/06/07 05:53
介绍
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快,更易解析。
一个JSON实例
{ "sites": [ { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" } ]}
JSON 语法
JSON 名称/值对
"name" : "张三"
JSON 值可以是:
数字(整数或浮点数)字符串(在双引号中)逻辑值(true 或 false)数组(在中括号中)对象(在大括号中)null
JSON 数组
{"sites": [{ "name":"csdn" , "url":"www.csdn.net/" }, { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" }]}
在上面的例子中,对象 “sites” 是包含三个对象的数组。每个对象代表一条关于某个网站(name、url)的记录。
JSON 使用 JavaScript 语法
var sites = [ { "name":"csdn" , "url":"www.csdn.net/" }, { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" }];
访问sites 第一项的名字sites[0].name;
, 返回结果csdn
循环数组
使用 for-in 来访问数组
for (i in myObj.sites) { x += myObj.sites[i] + "<br>";}
嵌套 JSON 对象中的数组
JSON 对象中数组可以包含另外一个数组,或者另外一个 JSON 对象
myObj = { "name":"网站", "num":3, "sites": [ { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] }, { "name":"csdn", "info":[ "csdn主页", "文章搜索","技术问答"] }, { "name":"Taobao", "info":[ "淘宝", "网购" ] } ]}
使用 for-in 来循环访问每个数组
for (i in myObj.sites) { x += "<h1>" + myObj.sites[i].name + "</h1>"; for (j in myObj.sites[i].info) { x += myObj.sites[i].info[j] + "<br>"; }}
效果如下
还可以修改和删除数组元素
修改数组值(通过索引值来修改数组值)
myObj.sites[1] = "Github";
删除数组元素
delete myObj.sites[1];
JSON.parse()
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
JSON.parse(text[, reviver])
参数说明:
text:必需, 一个有效的 JSON 字符串。
reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。
JSON 解析实例
例如我们从服务器接收了以下数据:
{ "name":"google", "site":"www.google.com" }
我们使用 JSON.parse() 方法处理以上数据,将其转换为 JavaScript 对象:
var obj = JSON.parse('{ "name":"google", "site":"www.google.com" }');
解析完成后,我们就可以在网页上使用 JSON 数据了
从服务端接收 JSON 数据
var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myArr = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myArr[1]; }};xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);xmlhttp.send();
异常
解析数据
JSON 不能存储 Date 对象。
如果你需要存储 Date 对象,需要将其转换为字符串。
之后再将字符串转换为 Date 对象。
var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';var obj = JSON.parse(text);obj.initDate = new Date(obj.initDate);document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;
启用 JSON.parse 的第二个参数 reviver,一个转换结果的函数,对象的每个成员调用此函数。
var text = '{ "name":"google", "initDate":"2013-12-14", "site":"www.google.com" }';var obj = JSON.parse(text, function (key, value) { if (key == "initDate") { return new Date(value); } else { return value;}});document.getElementById("demo").innerHTML = obj.name + "创建日期:" + obj.initDate;
解析函数
JSON 不允许包含函数,但你可以将函数作为字符串存储,之后再将字符串转换为函数。
var text = '{ "name":"google", "alexa":"function () {return 10000;}", "site":"www.google.com" }';var obj = JSON.parse(text);obj.alexa = eval("(" + obj.alexa + ")");document.getElementById("demo").innerHTML = obj.name + " Alexa 排名:" + obj.alexa();
不建议在 JSON 中使用函数
JSON.stringify()
JSON 通常用于与服务端交换数据。
在向服务器发送数据时一般是字符串。
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
JSON.stringify(value[, replacer[, space]])
参数说明:
value: 必需, 一个有效的 JSON 字符串。
replacer: 可选。用于转换结果的函数或数组。如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:”“。
如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时,将忽略 replacer 数组。
space:可选,文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 有可以使用非数字,如:\t。
JavaScript 对象转换
使用 JSON.stringify() 方法处理以上数据,将其转换为字符串
var obj = { "name":"google", "alexa":10000, "site":"www.google.com" }var myJSON = JSON.stringify(obj);document.getElementById("demo").innerHTML = myJSON;
myJSON 为字符串。
我们可以将 myJSON 发送到服务器
- JSON 详解
- JSON详解
- JSON详解
- JSON详解
- JSON详解
- JSON详解
- json 详解
- json详解
- JSON详解
- JSON详解
- JSON详解
- json详解
- JSON详解
- JSON详解
- JSON详解
- JSON详解
- json详解
- Json详解
- MPU6050
- leetcode 143. Reorder List
- 一篇文章学会springMVC
- oj1975: C语言实验——求两个整数之和
- 高频dom操作和页面性能优化探索(转)
- JSON详解
- Mac安装破解Unity3D(5.5版本)
- #ASM 翻译系列第二十七弹:ASM INTERNAL ASM METADATA BLOCK
- 有用的API集锦
- 前端笔试面试题--1
- Servlet的运行过程
- Android xml资源文件中@、@android:type、@*、?、@+含义和区别
- 使用R语言 4秒对10万行qq群聊天记录进行基本的清洗整理
- js自定义对象.属性