json是一种轻量级的数据交换格式,规则很简单:
对象内部,属性的名称和值用(:)隔开,不能单独存在属性名或者值。
```
对象:
{name:"lihua",age:"18",home:"shanghai"}
数组:
[{"name":"李华","age":"18","home":"上海"},{"name":"小明","age":"21","home":"北京"},{"name":"阿飞","age":"25","home":"深圳"}]
```
数组和对象都是数据的集合,除了使用符号不同,最重要的差异是:数组内的数据是有序的,而对象内的数据是无序的。
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官网:
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)
}
前端通过ajax请求回数据后,如果使用jquery中的$.ajax,则只需要声明返回的数据类型dataType:'json';
如果用原生javascript解析json,则有三种方法:
这里就不赘述了,有需要的可以自行去查阅。
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", //返回数据形式为jsonsuccess : function(result) {if (result) {console.log(result);for(var i=0;i
至此,重识JSON,前后端之相交脉络亦了然一二。更觉前端道阻且长,唯上下八方求索,方不落人后。