JSON
1、什么是JSON，有什么用？
JavaScript Object Notation（JavaScript对象标记），简称JSON。(数据交换格式)
JSON主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON。）
2、JSON是一种标准的轻量级的数据交换格式。特点是：
体积小，易解析。
3、在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。
XML体积较大，解析麻烦，但是有其优点是：语法严谨。（通常银行相关的系统之间进行数据交换的话会使用XML。）
4、JSON的语法格式：
var jsonObj = {
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
....
};
<body>
<script type="text/javascript">
// 创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析。)
var studentObj = {
"sno":"110",
"sname":"张三",
"sex":"男"
};
// 访问JSON对象的属性
alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex)
// 之前没有使用JSON的时候,定义类,创建对象,访问对象的属性.
Student = function(sno,sname,sex){
this.sno = sno;
this.sname = sname;
this.sex = sex;
}
var stu = new Student("111","李四","男");
alert(stu.sno + "," + stu.sname + "," + stu.sex);
// JSON数组
var students = [
{"sno":"120","sname":"zhangshang","sex":"男"},
{"sno":"120","sname":"李四","sex":"男"},
{"sno":"130","sname":"王五","sex":"男"}
];
// 遍历,逐一输出
for (var i = 0; i < students.length; i++) {
var stuObj = students[i]
alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex);
}
</script>
</body>
复杂一些的JSON对象
<body>
<script type="text/javascript">
var user = {
"usercode" : 110,
"username" : "张三",
"sex" : true,
"address" : {
"city" : "北京",
"street" : "大兴区",
"zipcode" : "12212121",
},
"aihao" : ["smoke","drink","tt"]
};
// 访问人名以及居住的城市
alert(user.username + "居住在" + user.address.city);
</script>
</body>
请自行设计JSON格式的数据，这个JSON格式的数据可以描述
整个班级中每一个学生的信息，以及总人数信息。
<body>
<script type="text/javascript">
var jsonData = {
//这个班3个人，信息如下
"total":3,
"students":[
{"name":"zhangsan","birth":"1980-10-20"},
{"name":"lisi","birth":"1981-10-20"},
{"name":"wangwu","birth":"1982-10-20"}
]
};
</script>
</body>JSON是一种行业内的数据交换格式标准。
JSON在JS中以JS对象的形式存在。
<body>
<script type="text/javascript">
/*eval函数的作用是：将字符串当做一段JS代码解释并执行。*/
window.eval("var i = 100")
alert("i = "+ i)
</script>
</body>
java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器
也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象.
可以使用eval函数,将json格式的字符串转换成json对象.
那儿是字符串拼接
<body>
<script type="text/javascript">
//这是java程序给发过来的json格式的"字符串"
var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"
// 将以上的json格式的字符串转换成json对象
window.eval("var jsonObj = " + fromJava)
//访问json对象, 在前端取数据.
alert(jsonObj.name + "," + jsonObj.password)
</script>
</body>
这样也行
面试题：
在JS当中：[]和{}有什么区别？
[] 是数组。
{} 是JSON。
java中的数组：int[] arr = {1,2,3,4,5};
JS中的数组：var arr = [1,2,null,"zhangshan",NaN];
JSON：var jsonObj = {"email" : "zhangsan@123.com","age":25};
<body>
<script type="text/javascript">
var json = {
"username":"zhanshan"
}
// JS中访问json对象的属性
alert(json.username)
//或者
alert(json["username"])
</script>
</body>
设置table的tbody
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
span{
color: red;
font-size: medium;
}
</style>
</head>
<body>
<script type="text/javascript">
// 有这些json数据
var data = {
"total" : 4,
"emps" : [
{"empno":7369,"ename":"SMITH","sal":800.0},
{"empno":7361,"ename":"SMITH2","sal":1800.0},
{"empno":7360,"ename":"SMITH3","sal":2800.0},
{"empno":7362,"ename":"SMITH4","sal":3800.0}
]
}
// 希望把数据展示到table当中
window.onload = function () {
document.getElementById('displayBtn').onclick = function () {
var emps = data.emps;
var html = ""
for (var i = 0; i < emps.length; i++) {
var emp = emps[i]
html += "<tr>"
html += "<td>"+emp.empno+"</td>"
html += "<td>"+emp.ename+"</td>"
html += "<td>"+emp.sal+"</td>"
html += "</tr>"
}
document.getElementById('emptbody').innerHTML = html
document.getElementById('count').innerText = data.total
}
}
</script>
<input type="button" value="显示员工信息列表" id="displayBtn" />
<h2>员工信息列表</h2>
<hr>
<table border="1px" width="50%">
<tr>
<th>员工编号</th>
<th>员工名字</th>
<th>员工薪资</th>
</tr>
<!-- 这里要用tbody，它里面可以包含很多tr-->
<tbody id="emptbody">
</tbody>
</table>
总共<span id="count">0</span>条数
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市级联，目前就是讲思路</title>
</head>
<script>
//真正开发不会这样准备数据，现在是讲思路
var dates={
'-1':[new Option("====请选择====","-1")],
'hn':[new Option("长沙","cs"),new Option("岳阳","yy"),new Option("邵阳","sy")],
'hb':[new Option("黄冈","hg"),new Option("武汉","wh")],
'gd':[new Option("深圳","sz"),new Option("广州","gz"),new Option("东莞","dg")]
};
function checkprovince(){
//1.获取省
var province =document.getElementById("province");
//2.获取选择的 option value 值
var value = province.value;
//3.通过value 去得到值
var citys =dates[value];
//4.获取city
var city=document.getElementById("city");
//如果有问题，必需加这一句
city.options.length=0;
//5.循环citys
for(var i in citys){
//console.log(citys[i]);
city.options[i]=citys[i];
}
}
</script>
<body>
省：
<select id="province" onchange="checkprovince()">
<option value="-1">====请选择====</option>
<option value="hn">湖南</option>
<option value="hb">湖北</option>
<option value="gd">广东</option>
</select>
市 ：
<select id="city">
<option value="-1">====请选择====</option>
</select>
</body>
</html>
3147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
