第九章 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>
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
