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有着天然的处理能力;(上面这个案例不复杂,只是感觉“这代码写的有点随意…”,对于这个松散的、“逻辑不严谨”的代码习惯就好了,,,,)

效果: