json数据的格式，JavaScript、jQuery读取json数据
JSON的特点：
JSON 是纯文本
JSON 具有“自我描述性”（人类可读）
JSON 具有层级结构（值中存在值）
JSON 可通过 JavaScript 进行解析
JSON 数据可使用 AJAX 进行传输
JSON 语法规则
JSON 语法是 JavaScript 对象表示法语法的子集。
- 数据在名称/值对中
"name" : "soulsjie"
- 数据由逗号分隔
"firstName":"John" , "lastName":"Doe"
- 花括号保存对象
{ "name":"soulsjie" , "sex":"男" }
- 方括号保存数组
{
"info": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
数据访问：
employees[0].lastName;
结果是：Gates
数据格式：
var info= {
"myname":"soulsjie",
"myage":18,
"myclass":"3班",
"myphone":"11121212154"
};
JavaScript读取json的实例：
<html>
<body>
<h2>在 JavaScript 中创建 JSON 对象</h2>
<p>
姓名: <span ></span><br />
年龄: <span ></span><br />
班级: <span ></span><br />
手机: <span ></span><br />
</p>
<script type="text/javascript">
var info= {
"myname":"soulsjie",
"myage":18,
"myclass":"3班",
"myphone":"11121212154"};
document.getElementById("myname").innerHTML=info.myname
document.getElementById("myage").innerHTML=info.myage
document.getElementById("myclass").innerHTML=info.myclass
document.getElementById("myphone").innerHTML=info.myphone
</script>
</body>
</html>
jQuery读取json数据实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="libs/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//创建json格式的数据
var info= {
"myname":"soulsjie",
"myage":18,
"myclass":"3班",
"myphone":"11121212154"
};
$("button").click(function(){//读取json的数据
$(".t1").html(info.myname);
$(".t2").html(info.myage);
$(".t3").html(info.myclass);
});
});
</script>
</head>
<body>
<button>获取JSON格式数据</button>
<p>
姓名：<span class="t1"></span><br/>
年龄：<span class="t2"></span><br/>
班级：<span class="t3"></span><br/>
</p>
</body>
</html>
利用eval ()将json字符串转换为json对象：
//json字符串
var test = '{ "student" : [' +
'{ "name":"stu1" , "age":15 },' +
'{ "name":"stu2" , "age":16 },' +
'{ "name":"stu3" , "age":20 } ]}';
//转换成json对象
var objtest = eval ("(" + test + ")");
$("button").click(function(){//读取json的数据
alert(objtest.student[0].name);
});
});