<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="json2.js"></script>
<title>jsonTest.html</title>
<script type="text/javascript">
function testJson(){
var jsonTest='{"name":"aaa","age":12}'; //定義一個簡單的字符串類型
var jsonObj=JSON.parse(jsonTest); //轉換為json對象
$("#div1").html("年齡"+jsonObj.name); //讀取並輸出json元素
var jsonTests='[{"name":"aaa","age":12},{"name":"bbb","age":25},{"name":"ccc","age":35},{"name":"ddd","age":45}]' //定義一個json數組對象的字符串
var jsonObjs=JSON.parse(jsonTests); //轉換為json數組對象
for ( var i = 0; i < jsonObjs.length; i++) {
$("#div2").html($("#div2").html()+"<br/>"+"名字"+jsonObjs[i].name+"年齡"+jsonObjs[i].age); //讀取json數組中的所有json對象以及json對象的元素
}
var jsonTestss={"yuangong":[{"name":"aaa","age":12},{"name":"bbb","age":25},{"name":"ccc","age":35},{"name":"ddd","age":45}],
"xuesheng":[{"name":"xuesheng1","age":22},{"name":"xuesheng2","age":20}] //定義一個組合類型的json對象
};
$("#div3").html(jsonTestss.yuangong.length+"<br>");
for ( var i = 0; i < jsonTestss.yuangong.length; i++) {
$("#div3").html($("#div3").html()+"<br/>"+"名字"+jsonTestss.yuangong[i].name+"年齡"+jsonTestss.yuangong[i].age);
}
}
</script>
</head>
<body onload="testJson()">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQueryJson.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var jsons='[{"name":"aaa","age":12},{"name":"bbb","age":25},{"name":"ccc","age":35},{"name":"ddd","age":45}]' //定義一個json數組對象
var jsonObj=eval(jsons);
for ( var i = 0; i < jsonObj.length; i++) {
$("#div1").html($("#div1").html()+"<br/>"+"姓名"+jsonObj[i].name+"年齡"+jsonObj[i].age);
}
$.each(jsonObj,function(i){
$("#div1").html($("#div1").html()+"<br/>"+"姓名"+jsonObj[i].name+"年齡"+jsonObj[i].age);
})
$.each(jsonObj,function(i,n){
$("#div1").html($("#div1").html()+"<br/>"+"下標為"+i+"的人的姓名"+n.name+"年齡"+n.age);
})
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
