1、完整的测试代码结构 测试出错可参考,后面分步说明
需要把jQuery文件放在下面网页代码的同文件夹下。

2、创建两个php数组和一个php对象;
--------------------------------------
<?php //从数据库中已经获得的数据,特殊的数据可以加密
$v1 = "this is v1";
$v2 = "this is v2";
$v3 = 3;
$arr=array("v1"=>$v1,"v2"=>$v2,"v3"=>$v3);
$arr2=array("v3"=>$v1,"v1"=>$v2,"v2"=>$v3);
class Oo{
public $a_arr;
public $a_arr2;
}
$O =new Oo; //创建一个对象
$O->a_arr = $arr;
$O->a_arr2 = $arr2;
?>
--------------------------------------

3、查看创建的数组和对象,在编辑器中保存 在浏览器中查看
第三个输出是把 前面三个合成一个大数组。
--------------------------------------
<?php
echo $v2."<br>";
echo $arr['v1']."<br>";//查看数据
echo json_encode($arr)."<br><br>";//查看json数据格式
echo json_encode($O)."<br><br>";//查看json数据格式
echo json_encode(array($arr,$arr2,$O))."<br><br>";
?>
--------------------------------------

4、将他们以一个大数组的形式 输出到json文件
--------------------------------------
<?php
$f = fopen("test-data.json","w") or die("fail to open");
fwrite($f,json_encode(array($arr,$arr2,$O)));
fclose($f);
?>
--------------------------------------

5、查看json中的数据
----以下数据内容-------
[{"v1":"this is v1","v2":"this is v2-\u54c8","v3":3},{"v3":"this is v1","v1":"this is v2-\u54c8","v2":3},{"a_arr":{"v1":"this is v1","v2":"this is v2-\u54c8","v3":3},"a_arr2":{"v3":"this is v1","v1":"this is v2-\u54c8","v2":3}}]
----以上数据内容-------
json语法是js的子集,从json文件中可以看到最后的数据是一个普通数组,数组中有三个对象,其中第三个对象是有前两个对象组合的对象。可见php的json_encode()将关联数组解析为对象(前两个关联数组)。将普通数组解析为数组(最后的组合)。
6、先看看JS的数组与对象
这不需要 html文件,在body内
--------------------------------------
<hr>
使用json数据
<p id = "js-data">
<button onClick="show()">show</button><br>
--------------------------------------
在html中的js 尝试使用对象和数组
--------------------------------------
<script >
var jso = {"vl1":"1-1-1","vl2":2,"vl3":3};// 一个 js 对象
var jsa1 = new Array("a","b","c");
document.write("一个js的对象的使用:"+jso.vl1+"<br>");
document.write("一个js的数组的使用:"+jsa1[0]+"<br>");
</script>
--------------------------------------

7、加载jQuery 用jquery打开json文件,获取数据传给js变量D。在show()函数中使用json中的数据。
在头部<head标签内加载jQuery
--------------------------------------
<script src="jquery.js"></script>
--------------------------------------
在后面的js代码中读取和使用。
--------------------------------------
<script >
var D = null;
$.getJSON("test-data.json",function(data){
D = data;
});
function show(){//定义响应函数
document.getElementById("js-data").innerHTML = D[2].a_arr2.v1;
}
</script>
--------------------------------------
保存 然后点击show 就会出现使用的数据。

8、用的那个数据?
数据使用的各个来源都在图中 好好看吧。
