Js中JSON数据交换使用总结
Json格式简介
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不须要任何特殊的 API 或工具包。
在JSON中，有两种结构：Json（花括号保存对象）对象和Json数组（方括号保存数组）。
Json对象以“{”（左大括号）开始，“}”（右大括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间运用“,”（英文逗号）分隔。 名称用引号括起来；值如果是字符串则必须用引号，数值型则不须要。例如：
var jsonObj={"username":"Jim","password":123456,"topscore":2000,"topplaytime":"2009-08-20"}；
Json数组是值（value）的有序集合。一个Json数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间运用“,”（英文逗号）分隔。例如：
var jsonArray=["Jim",123456, 2000, "2009-08-20"];
如果将Json对象和Json数组进行嵌套使用，则可以组成很复杂的json格式，如Json数组的每个元素可以为Json对象：
var jsonObjArray=[{"username":"Jim","password":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"username":"Tom","password":123456,"topscore":1500,"topplaytime":"2009-11-20"}];
JSON 值可以是：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true或false）、数组（在方括号中）、对象（在花括号中）、null。
Json与Json字符串互相转化
1.jQuery插件支持的转换方式。
$.parseJSON(jsonStr); //jQuery.parseJSON(jsonStr),可以将json字符串转换成json对象。
2.浏览器支持的转换方式(Firefox，chrome，opera，safari，ie9，ie8)等浏览器：
JSON.parse(jsonStr); //可以将json字符串转换成json对象
JSON.stringify(jsonObj); //可以将json对象转换成json对符串
注：ie8(兼容模式),ie7和ie6没有JSON对象，推荐采用JSON官方的方式，引入json.js。
3.Javascript支持的转换方式
eval('(' + jsonStr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号
注：ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象，但不推荐这些方式，这种方式不安全eval会执行json串中的表达式。
4 .JSON官方的转换方式：
http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；
可以在https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。
自己编写的用于测试json解析的代码，需要引入json2.js和jquery.js。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSON范例</title>
<script src="../scripts/json2.js"></script>
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//json字符串转Json对象1
function jsonStrToJsonObject1(){
//注意：如果使用单引号定义json字符串，则单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。
var jsonStr1 = '{"root":[{"name":"1","value":0},{"name":"6101","value":"北京市"},{"name":"6102","value":"天津市"}],"rows":9}';
//注意：如果使用双引号定义json字符串，则双引号引号写在{}外，每个属性名都必须用反斜杠转义字符和双引号
var jsonStr2 = "{\"root\":[{\"name\":\"1\",\"value\":0},{\"name\":\"6101\",\"value\":\"北京市\"},{\"name\":\"6102\",\"value\":\"天津市\"},{\"name\":\"6103\",\"value\":\"上海市\"}],\"rows\":9}"; //jQuery中提供的parseJSON方法，可接受一个JSON字符串，返回解析后的对象，所以需要引入JQuery核心库
var jsonObj = jQuery.parseJSON(jsonStr2);// 解析后返回一个JSON对象
alert(jsonObj.rows);
alert(jsonObj.root); //特殊方式：foreach的形式
for(var p in jsonObj.root){//遍历json数组时，这里写p为索引，0,1……
alert(jsonObj.root[p].name + " " + jsonObj.root[p].value);
} alert(jsonObj.root[1].value);
alert(JSON.stringify(jsonObj.root[1]));
} //json字符串转Json对象2
function jsonStrToJsonObject2(){
var jsonStr1 = '{"root":[{"name":"1","value":0},{"name":"6101","value":"北京市"},{"name":"6102","value":"天津市"}],"rows":9}';
var jsonStr2 = "{\"root\":[{\"name\":\"1\",\"value\":0},{\"name\":\"6101\",\"value\":\"北京市\"},{\"name\":\"6102\",\"value\":\"天津市\"},{\"name\":\"6103\",\"value\":\"上海市\"}],\"rows\":9}"; //JSON中提供的parse方法，可接受一个JSON字符串，返回解析后的对象，所以需要引入JQuery核心库
var jsonObj = JSON.parse(jsonStr2);// 解析后返回一个JSON对象
alert(jsonObj.rows);
alert(jsonObj.root); //一般方式：普通for循环
for(var i = 0; i < jsonObj.root.length; i++){
alert(jsonObj.root[i].name + " " + jsonObj.root[i].value);
}
//console.log(jsonObj.root);
alert(jsonObj.root[1].value);
alert(JSON.stringify(jsonObj.root[1]));
} //json字符串转Json对象3
function jsonStrToJsonObject3(){
var jsonStr = "{\"root\":[{\"name\":\"1\",\"value\":0},{\"name\":\"6101\",\"value\":\"北京市\"},{\"name\":\"6102\",\"value\":\"天津市\"},{\"name\":\"6103\",\"value\":\"上海市\"}],\"rows\":9}";
var jsonObj = eval("("+jsonStr+")"); alert(jsonObj.rows);
//手动追加一个json对象到数组中
jsonObj.root.push({"name":"029","value":"西安市"});
alert(jsonObj.root);
//console.log(jsonObj.root);
alert(jsonObj.root[1].value);
alert(JSON.stringify(jsonObj.root[1])); //jQuery方式：对于一般的js生成json对象，只需要将$.each()方法替换为for语句即可，其他不变。
$.each(jsonObj.root,function(idx,item){
if(idx==0){
return true;//同countinue，返回false同break
}
alert("name:"+item.name+",value:"+item.value);
}); } //测试使用eval函数json字符串转Json对象4
function testEval(){ //var jsonStr1 = "{name:'test',age:18}";//此种格式也可以
//var jsonObj1 = eval(jsonStr1);//VM134:1 Uncaught SyntaxError: Unexpected token :
//原因在于：eval本身的问题。 由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式
//加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。
//举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：
alert(eval("{}")); //return undefined
alert(eval("({})"));//return object[Object]//对于这种写法，在JS中，可以到处看到。 如: (function()) {}(); 做闭包操作时等。 //var jsonStr1 = "{name:'test',age:18}";//此种格式也可以
var jsonStr2 = "{\"name\":\"Tom\",\"age\":18}";
var jsonObj2 = eval("("+jsonStr2+")"); alert(jsonObj2); //获取属性值的两种方式
alert(jsonObj2.name);
alert(jsonObj2["name"]); //在JS中将JSON的字符串解析成JSON数据格式，一般有两种方式： 1.一种为使用eval()函数。 2. 使用Function对象来进行返回解析。
//1.第一种对于服务器返回的JSON字符串，如果jquery异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象。
//2.第二种解析方式就是使用Function对象来完成，它的典型应用就是在JQUERY中的AJAX方法下的success等对于返回数据data的解析。
var json='{"name":"CJ","age":18}';
var data =(new Function("","return "+json))();
alert(data.name);
} //Json对象转json字符串
function jsonObjectToJsonStr(){
var jsonObj=
{
root:
[
{name:'1',value:'0'},
{name:'6101',value:'北京市'},
{name:'6102',value:'天津市'},
{name:'6103',value:'上海市'},
{name:'6104',value:'重庆市'},
{name:'6105',value:'渭南市'},
{name:'6106',value:'延安市'},
{name:'6107',value:'汉中市'},
{name:'6108',value:'榆林市'},
{name:'6109',value:'安康市'},
{name:'6110',value:'商洛市'}
],
rows:9
};
alert(jsonObj.rows);
alert(jsonObj.root);
var jsonStr = JSON.stringify(jsonObj);//可以将json对象转换成json字符串
alert(jsonStr);
} //Json对象转json字符串
function checkObjAndArray(){
//
var cityObj1 = new Object();
cityObj1.name = "0917";
cityObj1.value = "宝鸡"; alert(cityObj1);
alert(cityObj1.value);
var cityStr1 = JSON.stringify(cityObj1);//可以将json对象转换成json字符串
alert(cityStr1); var cityObj2 = new Object();
cityObj2.name = "029";
cityObj2.value = "西安"; alert(cityObj2);
alert(cityObj2.value);
var cityStr2 = JSON.stringify(cityObj2);//可以将json对象转换成json字符串
alert(cityStr2); var cityArray = new Array();
cityArray.push(cityObj1);
cityArray.push(cityObj2);
alert(cityArray);
var cityStrs = JSON.stringify(cityArray);//可以将json对象转换成json字符串
alert(cityStrs);
} </script>
</head>
<body>
<input type="button" name="jsonTest" onclick="jsonStrToJsonObject1()" value="json字符串转Json对象1（jQuery.parseJSON(jsonstr)）">
<p>
<input type="button" name="jsonTest" onclick="jsonStrToJsonObject2()" value="json字符串转Json对象2（JSON.parse(jsonstr)）">
<p>
<input type="button" name="jsonTest" onclick="jsonStrToJsonObject3()" value="json字符串转Json对象3（eval(jsonstr)）">
<p>
<input type="button" name="jsonTest" onclick="jsonObjectToJsonStr()" value="Json对象转json字符串（JSON.stringify(jsonobj)）"/>
<p>
<input type="button" name="jsonTest" onclick="testEval()" value="测试eval函数（testEval()）">
<p>
<input type="button" name="jsonTest" onclick="checkObjAndArray()" value="测试对象和数组（checkObjAndArray()）">
<p> </body>
</html>
Js中JSON数据交换使用总结的更多相关文章
- js中json数据简单处理（JSON.parse()和js中嵌套html）
js中json数据简单处理(JSON.parse()和js中嵌套html) 一.总结 1.html中嵌套js:<script>js代码</script> 2.js中嵌套html ...
- JS中json数据的处理
1. json数据结构(对象和数组) json对象:var obj = {"name":"xiao","age":12}; json数组: ...
- iOS 中 JSON 数据交换格式
JSON (JavaScript Object Notation)是一种轻量级的数据交换格式. JSON 的详细教程,能够參见 JSON 中国:http://www.json.org.cn/ ...
- 初探原生js根据json数据动态创建table
初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...
- js中JSON和JSONP的区别，让你从懵逼到恍然大悟
说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...
- js读取json数据（php传值给js）
<?php $array =array('fds','fdsa','fdsafasd'); // json_encode($array); ?> <html> <hea ...
- js中JSON的解析（将json字符串转化为对象）和序列化（将对象转化为json字符串）（函数的功能一般都挺全的，需要的时候去查看完整函数）
js中JSON的解析(将json字符串转化为对象)和序列化(将对象转化为json字符串)(函数的功能一般都挺全的,需要的时候去查看完整函数) 一.总结 1.JSON解析:JSON.parse(myJS ...
- js格式化JSON数据
前言: 最近做的项目中遇到个需要在前端页面中将某个设备需要的数据格式展示出来,方便用户配置.一开始单纯的将数据格式写入到pre标签中, 但是通过pre标签写入的数据格式在代码可视化上不是很优雅.由于上 ...
- js声明json数据，打印json数据，遍历json数据
1.js声明json数据: 2.打印json数据: 3.遍历json数据 //声明JSON var json = {}; json.a = 1; //第一种赋值方式(仿对象型) json['b'] = ...
随机推荐
- 支持向量机 (SVM)分类器原理分析与基本应用
前言 支持向量机,也即SVM,号称分类算法,甚至机器学习界老大哥.其理论优美,发展相对完善,是非常受到推崇的算法. 本文将讲解的SVM基于一种最流行的实现 - 序列最小优化,也即SMO. 另外还将讲解 ...
- jQuery设置元素attribute之特殊属性
一般我们使用.attr()对某个dom元素设置attribute属性.今天在使用过程中发现在给input设置disabled属性为true时,最终元素disabled属性值解析成了disabled,并 ...
- i5 6300HQ 和 i7 6700HQ
i7 6700HQ: 四核八线程 14nm 45W 2.6-3.5GHz 支持DDR4 2133内存 三级缓存6M HD Graphics 530集显 i5 6300HQ: 四核四线程 14nm 45 ...
- LAMP简易安装
看,老鸟绕道–LAMP简易安装 导读 LAMP是企业中最常用的服务,也是非常稳定的网站架构平台.其中L-指的是Linux,A-指的是Apache,m-指的是mysql或者marriDB,p-php.相 ...
- 安装Fedora 24后必要的设置
安装Fedora 24后必要的设置 导读 Fedora 是一个 Linux 发行版,是一款由全球社区爱好者构建的面向日常应用的快速.稳定.强大的操作系统.它允许任何人自由地使用.修改和重发布,无论现在 ...
- U盘格式转换
有一次想把5G的文件拷到U盘里面,悲催的发现拷不进去,文件过大...... 硬盘格式:NTFS 把自己的U盘也改了格式后,就可以了
- 连接linux数据库Oracle时报错ORA-12541: TNS: 无监听程序
远程服务器的数据库服务未开启,以及监听未打开 连接oracle 启动服务,startup 切换到oracle /bin 目录,cd $ORACLE_HOME/bin 启动监听, lsnrctl sta ...
- java 队列基础操作
http://www.cnblogs.com/fuck1/p/5996116.html 队列(简称作队,Queue)也是一种特殊的线性表,队列的数据元素以及数据元素间的逻辑关系和线性表完全相同,其差别 ...
- Python2.7.12开发环境构建(自动补全)
一.安装readline-devel包 Python的编译安装依赖于这个包 yum -y install readline-devel 二.安装Python2.7.12 Python官方网站(到此处下 ...
- 【jq】c#零基础学习之路（3）继承和虚方法
c#只能继承一个基类和多个接口(0+) 父类:Human: class Human { public virtual Move() { Console.WriteLine("Human的虚方 ...