JSON（及其在ajax前后端交互的过程）小识

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一. json介绍

json是一种轻量级的数据交换格式，规则很简单：

并列的数据之间用逗号（,）分隔；
映射用冒号（:）表示；
并列数据的集合（数组）用方括号（[]）表示；
映射的集合（对象）用大括号（{}）表示。

对上述规则解析，可以发现：

数组是用（[]）创建的，对象是用（{}）创建的；
数组和对象里面的元素都是用（,）隔开：{name:"李华",age:"18",home:"shanghai"}&&[]
对象和数组可以相互嵌套，一个数组中的一个元素可以是对象或数组，一个对象中的一个属性的值也可以是一个对象或数组；
对象内部，属性的名称和值用（:）隔开，不能单独存在属性名或者值。
对象： {name:"lihua",age:"18",home:"shanghai"}数组： [{"name":"李华","age":"18","home":"上海"},{"name":"小明","age":"21","home":"北京"},{"name":"阿飞","age":"25","home":"深圳"}]

数组和对象都是数据的集合，除了使用符号不同，最重要的差异是：数组内的数据是有序的，而对象内的数据是无序的。

#二.json在前后端数据交互中的应用

1. 服务端数据处理

1.1 json_encode

后台将数据处理成json格式，前端通过ajax调用进行DOM操作。在php中，数组分为三类：索引数组；关联数组；多维数组。而在javascript中，只有索引数组。

所以，php中 json_encode()只将索引数组转成json数组格式，而将关联数组/多维数组转成json对象格式。

$arr = array(111,'aaa','bbb'); $arr1 = array( 'a' => 'aaa', 'b' => 222 ); $arr2 = array( 'a' => 'aaa', 'other' => array( 'bbb',1111 ) ); echo json_encode($arr); //[111,"aaa","bbb"] echo json_encode($arr1); //{"a":"aaa","b":222} echo json_encode($arr2); //{"a":"aaa","other":["bbb",1111]}

####1.2 json_decode

php对json格式的字符串进行解码，将其转为php常量。

下例来自php官网：

<?php $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}'; var_dump(json_decode($json)); //返回一个对象 var_dump(json_decode($json, true)); //返回一个数组?>

object(stdClass)#1 (5) { ["a"] => int(1) ["b"] => int(2) ["c"] => int(3) ["d"] => int(4) ["e"] => int(5) }array(5) { ["a"] => int(1) ["b"] => int(2) ["c"] => int(3) ["d"] => int(4) ["e"] => int(5) }

###2.前端对json的处理

前端通过ajax请求回数据后，如果使用jquery中的$.ajax,则只需要声明返回的数据类型dataType:'json';

如果用原生javascript解析json，则有三种方法：

eval()
new Function()
JSON.parse()

这里就不赘述了，有需要的可以自行去查阅。

####2.1 遍历复杂json

有时候需要对json进行循环遍历，比如画echart图的时候，如果用json中元素的某个属性值作为x轴数据，用另外一个属性值作为映射值。

[{"name":"李华","age":"18","home":"上海"},{"name":"小明","age":"21","home":"北京"},{"name":"阿飞","age":"25","home":"深圳"}]

以上述json作为例子，要用name作为x轴，age作为对应值。就需要对json遍历两次，将所有的name属性值push为一个数组，同样，将所有的age属性值push为一个数组，再赋值给相对应的坐标。

success : function(result) data : (function(){ var arr=[]; $.ajax({ type : "post", async : false, //同步执行 url : "test1.php", data : {}, dataType : "json", //返回数据形式为json success : function(result) { if (result) { console.log(result); for(var i=0;i<result.length;i++){ console.log(result[i].name); arr.push(result[i].name); } } }, error : function(errorMsg) { alert("图表请求数据失败啦!"); myChart.hideLoading(); } }) return arr; })() //控制台打印出ajax解析之后的结果：[Object, Object, Object, Object, Object, Object, Object, Object]