【前言】 前面咱们已经总结过，Java使用Json。 《Java使用Json》 下面我将继续学习，Html使用Json。 【先来一个小demo】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-1.11.0.min.js" ></script>
<title>Json[js篇]</title>
</head>
<body>
<span id="a"></span>
<span id="b"></span>
<span id="c"></span>
<span id="d"></span>
</body>
<script type="application/javascript">
var jsona = {
"a":1,
"b":2,
"c":3,
"d":4
}
$("#a").text(jsona.a);
$("#b").text(jsona.b);
$("#c").text(jsona.c);
$("#d").text(jsona.d);
</script>
</html>
【JSON 对象】
//Json对象
var frozen = {
"red":"Json",
"ant":"对象"
}
【JSON 数组】
var redant = {
"sites": [
{ "name":"小风" , "address":"天通苑" },
{ "name":"小明" , "address":"六里桥" },
{ "name":"小王" , "address":"星宫" }
],
"unio":"我不知道要写点啥"
}
【JSON.parse()】 JSON 通常用于与服务端交换数据。 在接收服务器数据时一般是字符串。 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
【JSON.stringify()】 JSON 通常用于与服务端交换数据。 在向服务器发送数据时一般是字符串。 我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
【紧接着一个小demo】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-1.11.0.min.js" ></script>
<title>Json[js篇]</title>
</head>
<body>
<a onclick="jsonfro(1)">获取Json对象属性</a><br/>
<a onclick="jsonfro(2)">获取Json数组属性</a><br/>
<a onclick="jsonfro(3)">循环获取Json对象属性</a><br/>
<a onclick="jsonfro(4)">循环获取Json数组属性</a><br/>
<a onclick="jsonfro(5)">JSON.parse()处理服务端返回数据</a><br/>
<a onclick="jsonfro(6)">JSON.stringify()处理发送到服务端的数据</a><br/>
<div id="showarea" style="background-color: #CCCCCC; width:400px; height: 200px;"></div>
</body>
<script type="application/javascript">
//Json对象
var frozen = {
"red":"Json",
"ant":"对象"
}
var redant = {
"sites": [
{ "name":"小风" , "address":"天" },
{ "name":"小明" , "address":"六" },
{ "name":"小王" , "address":"星" }
],
"unio":"我不知道要写点啥"
}
function jsonfro(num){
var test = "";
switch (num){
case 1:
test = frozen.red+"<br/>"+frozen.ant;
break;
case 2:
test = redant.sites[0].name + redant.sites[0].address + "<br/>"
+ redant.sites[2].name + redant.sites[2].address + "<br/>"
+ redant.unio;
break;
case 3:
//在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：
for (x in redant) {
test += redant[x] + "<br>";
}
break;
case 4:
for (i in redant.sites) {
test += redant.sites[i].name + "<br>";
}
break;
case 5:
var text = '{ "name":"这里是服务端返回的数据", "initDate":"2013-12-14", "site":"呵呵"}';
var obj = JSON.parse(text);
test = obj.name + obj.initDate + obj.site;
break;
case 6:
//json格式转为字符串发送到服务器端
var myJSON = JSON.stringify(redant);
default:
break;
}
$("#showarea").html(test);
}
</script>
</html>
