第九章 json数据处理
第一节 javascript对象
1.概念
对象: 拥有具体的形象,包含特征(属性)和行为(方法)两个方面。以属性-值的方式来描述对象数据。
例如:
令狐冲这个人就是一个对象,他具有的属性:姓名,性别,年龄。他具有的行为:吃,喝,玩,学习。
奔驰车这个车也是一个对象,它具有的属性:品牌,价格,颜色。它具有的行为:跑,刹车,加油。
2.示例
创建js对象有两种方式:
第一种方式:new Object()
<!DOCTYPE html> <html> <head> <title> my page </title> <style type="text/css"> </style> <script type="text/javascript"> //创建一个js对象 var p =new Object(); //点:对象属性访问符 //属性可以动态创建 p.name="令狐冲"; p.sex="男"; p.age =18; p.tall = 1.8; //自我介绍的方法 p.introduce=function(){ alert(this.name+" "+this.sex+" "+this.age+" "+this.tall); } //访问对象的name属性 //alert(p.name); //用下标方式访问属性 //alert(p["name"]); //调用对象的方法 //p.introduce(); //使用for迭代对象属性,遍历对象 /*for(var x in p) { alert(x+" --- "+p[x]); }*/ //使用Object.keys()获取对象的属性数组 var keys = Object.keys(p); alert(keys+" "+keys.length); for(var i=0;i<keys.length;i++) { var k = keys[i]; document.write(k+" ---> "+p[k]+"<br/>"); } </script> </head> <body> </body> </html>
第二种方式:{}
<!DOCTYPE html> <html> <head> <title> my page </title> <style type="text/css"> </style> <script type="text/javascript"> //var p =new Object(); //使用字面量{}创建js对象 var p = { name:"张三", sex:"男", age:18, tall:1.7, show:function(){ alert(this.name+" "+this.sex+" "+this.age+" "+this.tall); } }; //使用.访问对象属性 //alert(p.name); //使用索引方式访问属性,此时属性要加引号 //alert(p["name"]); //调用对象的方法 //p.show(); for(var x in p) { alert(x+" --- "+p[x]); } </script> </head> <body> </body> </html>
访问对象内容的方法:
//访问对象的name属性 //alert(p.name); //用下标方式访问属性 //alert(p["name"]); //调用对象的方法 //p.introduce(); //使用for迭代对象属性,遍历对象 /*for(var x in p) { alert(x+" --- "+p[x]); }*/ //使用Object.keys()获取对象的属性数组 var keys = Object.keys(p); alert(keys+" "+keys.length); for(var i=0;i<keys.length;i++) { var k = keys[i]; document.write(k+" ---> "+p[k]+"<br/>"); }
3.数组和对象的关系
数组本质上也是对象
<!DOCTYPE html> <html> <head> <title> my page </title> <style type="text/css"> </style> <script type="text/javascript"> //var p=new Object(); //p.name="张三"; //p["name"]="张三"; //alert(p.name); /*var ary = new Array(); ary["a"]=100; ary["b"]=200; ary["c"]=300; //alert(ary.length); for(var x in ary) { alert(x+" "+ary[x]); }*/ var ary =new Array(); ary["第一排"]=["张三","李四","王武"]; ary["第二排"]=["郭靖","黄蓉","洪七公"]; alert(ary["第一排"]); </script> </head> <body> </body> </html>
省市级联
<!DOCTYPE html> <html> <head> <title> my page </title> <style type="text/css"> </style> <script type="text/javascript"> var ary = new Array(); ary["河南"]=["郑州","洛阳"]; ary["河北"]=["石家庄","保定"]; //加载省份 function loadPro() { //获取省份下拉框 var selProvince = document.getElementById("pro"); for(var p in ary) { //alert(p); //创建option属性 var opt = document.createElement("option"); opt.innerHTML=p; opt.value=p; //将option元素添加到下拉框中 selProvince.appendChild(opt); } } function loadCity() { //获取city下拉框 var selCity = document.getElementById("city"); //每次加载市之前先清空市的下拉框 selCity.innerHTML=""; //获取省份的值 var province = document.getElementById("pro").value; //alert(province); //根据省份得到对应的市 //alert(ary[province]); var citys = ary[province]; for(var c in citys) { //获取对应属性索引的值 var city = citys[c]; //创建option元素 var opt = document.createElement("option"); opt.innerHTML=city; opt.value=city; //将市选项元素添加到市下拉框中 selCity.appendChild(opt); } } </script> </head> <body οnlοad="loadPro()"> 省份: <select id="pro" οnchange="loadCity()"> <option value="">请选择</option> </select> 市: <select id="city"> </select> </body> </html>
第二节 json对象
1.概念
json: javascript对象表示法(javascript Object nonation),使用轻量级的对象结构,从js对象演化而来,但在概念上与js对象有区别。json对象主要用于跨平台的数据传输。
语法:
var json对象 = {"属性1":值,"属性2":值};
说明: json对象用{}
进行定义,其中属性
必须用双引号括起来。值如果是字符串也必须用双引号
括起来。另外,json中不能定义函数。
2.示例
var p = { "name":"张三", "sex":"男", "age":18, "tall":1.7 }; alert(p["name"]+" "+p.name);
3.json字符串与js对象的转换
-
使用JSON.parse(字符串)将json格式字符串转为js对象
//json格式的字符串 var pStr = '{"name":"孙悟空","age":500}'; //alert(pStr+" --> "+typeof(pStr)); //JSON.parse():将json格式的字符串转为javascript对象 var pObj = JSON.parse(pStr); //alert(pObj+" --> "+typeof(pObj)); //在火狐控制台输出 console.log(pObj);
-
使用JSON.stringify(js对象),将js对象转为json格式字符串
//js对象 var pObj={name:"张三",age:100}; //JSON.stringify():将js对象转为json字符串 var pStr = JSON.stringify(pObj); alert(pStr);
第三节 使用json数据生成表格
<!DOCTYPE html> <html> <head> <title> my page </title> <style type="text/css"> </style> <script type="text/template" id="temp"> <tr> <td>name</td> <td>sex</td> </tr> </script> <script type="text/javascript"> var stus = [ {"name":"张三","sex":"男"}, {"name":"李四","sex":"女"}, {"name":"王五","sex":"女"}, {"name":"赵六","sex":"男"} ]; /* for(var i=0;i<stus.length;i++) { var s = stus[i]; alert(s.name+" "+s.sex); }*/ window.οnlοad=function(){ var tmp = document.getElementById("temp").innerHTML; var str = ""; for(var i=0;i<stus.length;i++) { var s = stus[i]; str+=tmp.replace("name",s.name) .replace("sex",s.sex) } //alert(str); document.getElementById("tbd").innerHTML=str; } </script> </head> <body> <table border="1" align="center"> <thead> <tr> <th>姓名</th> <th>性别</th> </tr> </thead> <tbody id="tbd"> </tbody> </table> </body> </html>