1.JSON语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 1.Jason是另一种创建对象实例的方法 2.json数据的表示方式成对的参数与值 3.可以转换为字符串进行存储和转换 --> <script> var jsonobject= { //参数和值的对应关系 "gushi1":"落花人独立", "gushi2":"微雨燕双飞" } alert(jsonobject.gushi1); </script> </body> </html>
2.JSON优点
1)序列化的数据便于在网络环境中进行存储和传输
2)JSON的用途类似于XML,但是它更容易阅读和理解
3)XML解析过程慢,JSON提供的是JavaScript对象可以随时使用
3.JSON易于阅读
1)JSON可以快速创建和解析
2)是JavaScript的一个子集,不需要特殊的解释程序或额外的软件包
3)见名知意
4)概念简单.都是 "参数":"值"对
3.访问JSON数据
1)去序列化:还原JSON字符串编码的数据-->将字符串转换为JavaScript代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用eval()</title> </head> <body> <!-- eval()函数会计算或运行作为参数传递的内容 例:var x = eval(4*3); //x=12 --> <script type="text/javascript"> //JSON语法 "参数":"值" 的形式 //参数不能是纯数字 var user = '{"shiju1":"蛾儿雪柳黄金缕","shiju2":"笑语盈盈暗香去","shiju3":"众里寻他千百度"}'; //使用eval解析 var myObject = eval('('+user+')'); //myObject可以使用参数句号形式访问值 alert(myObject.shiju1); </script> </body> </html>
2)浏览器解析JSON语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用浏览器解析JSON</title> </head> <body> <!-- 某些浏览器会创建一个名为JSON的JavaScript对象来管理JSON的编码和解码.这个对象有两个方法 stringify() parse() --> <script type="text/javascript"> //JSON语句 "参数":"值" var Mary ='{"shici1":"众里寻他千百度","shici2":"蓦然回首","shici3":"那人却在灯火阑珊处"}'; //浏览器解析 返回的是数组 var myObject = JSON.parse(Mary); var result = ""; //i对应参数 for(i in myObject){ result += i + "="+myObject[i] +" "; } alert(result); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JSON.stringify</title> </head> <body onload="jsonParse()"> <script type="text/javascript"> function jsonParse(){ //将提示框的返回值作为被解析JSON语句 var inString = prompt("Enter JSON object"); var out = ""; //解析完的是一个数组 myobject = JSON.parse(inString); //遍历 //i对应参数 for(i in myobject){ out +="JSON序列对:"+i+"="+myobject[i]+' '; } alert(out); } </script> </body> </html>
3)stringify方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>stringify</title> </head> <body> <!-- 序列化:数据转换为便于通过网络进行存储和传输的形式 稍后再回复为原始的格式 --> <script type="text/javascript"> var Dan=new Object();//创建对象 Dan.height=1.85; Dan.age=18; Dan.eyeColor="blue"; alert(JSON.stringify(Dan)); </script> </body> </html>
4.JSON数据类型
每个 "参数":"值" 参数必须遵循一些简单的语法规则
1)不能是JavaScript保留的关键字
2)不能以数字开头
3)除了下划线与美元 不能包含任何特殊字符
每个值可以是以下一些数据类型
数值 字符型 布尔值 数组 对象 null(空)
注意:JavaScript有些数据类型不属于JSON标准,包括date error math function
5,JSON模拟关联数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> var conference= { "startDay":"Monday", "nextDay":"Tuesday", "endDay":"wednesday" } alert(conference["endDay"]); alert(conference.nextDay) //conference["参数值"] //等价于 //conference.参数值 </script> </body> </html>
温馨小提示:JSON是独立于任何编程语言和平台的,很多编程语言如:java PHP c都含有JSON库和工具
6,使用JSON创建对象
1)属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 1.Jason是另一种创建对象实例的方法 2.json数据的表示方式成对的参数与值 3.可以转换为字符串进行存储和转换 --> <script> var jsonobject= { //参数和值的对应关系 "gushi1":"落花人独立", "gushi2":"微雨燕双飞" } alert(jsonobject.gushi1); </script> </body> </html>
2)方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> var user= { "username":"phib1234", "location":"Spain", "height":"1.80", "setName":function(newName) { this.username=newName; } } var newName=prompt("Enter a new username"); user.setName(newName); </script> </body> </html>
3)数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var bookListObject={ "booklist":["Foundation", "Dune", "Q萌果子C", "2001 A Space Odyssey", "Stringer In A Stringe Land" ] } var book=bookListObject.booklist[2]; alert(book); </script> </body> </html>
4)对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Understanding JSON</title> <script type="text/javascript"> var bookListObject={ "booklist":[{"title":"Foundation","author":"Isaac Asimov"}, {"title":"Dune","author":"Frank Herbert"}, {"title":"Eon","author":"Greg Bear"}, {"title":"2001 A Space Odyssey","author":"Arthur C.Clarke"}, {"title":"Stranger","author":"Robert A.Heinlein"}] } //保存用户消息的一个变量 var out=""; //获取数组 var books=bookListObject.booklist; //获取数组,一本一本地获取图书 for(var i=0;i<books.length;i++) { var booknumber=i+1;; out+="Book"+booknumber+ "is:'"+books[i].title+ "'by"+books[i].author+ " "; } </script> </head> <body onload="alert(out)"> </body> </html>