up:: JSON简介与语法规则
疑问:JSON主要用于数据传递和数据表示上,程序势必要和JSON数据进行交互;那么JavaScript如何访问JSON文件???
JavaScript天生就具备对JSON数据的处理能力;
直接将emp.json中的内容,赋值给变量json;JavaScript可以将其作为一个数组进行解析:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var json= [
{
"empno": 1234,
"ename": "李宁",
"jbo": "软件工程师",
"hiredate": "2017-05-12",
"salary": 13000,
"dname": "研发部"
},
{
"empno": "5678",
"ename": "王五",
"jbo": "运维工程师",
"hiredate": "2017-04-12",
"salary": "12000",
"dname": "测试部",
"customers": [
{
"cname": "李东"
},
{
"cname": "张三"
}
]
}
];
// console.log():在浏览器控制台中,对json内容进行输出。console是浏览器内置的对象,表示控制台;
// log方法是向浏览器输出一个日志
console.log(json);
</script>
</head>
<body>
</body>
</html>
结果:
JavaScript读取JSON并输出:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var json= [
{
"empno": 1234,
"ename": "李宁",
"job": "软件工程师",
"hiredate": "2017-05-12",
"salary": 13000,
"dname": "研发部"
},
{
"empno": "5678",
"ename": "王五",
"job": "运维工程师",
"hiredate": "2017-04-12",
"salary": "12000",
"dname": "测试部",
"customers": [
{
"cname": "李东"
},
{
"cname": "张三"
}
]
}
];
// console.log():在浏览器控制台中,对json内容进行输出。console是浏览器内置的对象,表示控制台;
// log方法是向浏览器输出一个日志
console.log(json);
for(var i=0;i<json.length;i++){
var emp = json[i];
document.write("<h1>");
document.write(emp.empno);
document.write(","+emp.ename);
document.write(","+emp.job);
document.write(","+emp.hiredate);
document.write(","+emp.dname);
// 区分对待
document.write("</h1>");
if(emp.customers != null){
document.write("<h2>---");
for(var j = 0;j< emp.customers.length;j++){
var customer = emp.customers[j];
document.write(customer.cname+",");
}
document.write("</h2>");
}
}
</script>
</head>
<body>
</body>
</html>
可以看到 (1)JavaScript把[ ]JSON作为一个数组解析了 ; (2)直接通过json[i]这种方式就能获取,JSON对象数组中的第i个对象 ; (3)然后通过emp.empno这种形式就能获取empno这个键对应的值 ; (4)一个键的值可能是一个字符串(或数组),也可能是包含JSON对象的数组 ;
通过上面可以发现,JavaScript对JSON有着天然的处理能力;(上面这个案例不复杂,只是感觉“这代码写的有点随意…”,对于这个松散的、“逻辑不严谨”的代码习惯就好了,,,,)
效果: