JSON:JavaScript 对象表示法(JavaScript Object Notation)。
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 id="myname"></span><br />
年龄: <span id="myage"></span><br />
班级: <span id="myclass"></span><br />
手机: <span id="myphone"></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);
});
});