| <!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>json格式</title> |
| |
<!-- |
| |
json(JavaScript Object Notation) js对象标记！是一种数据交换格式！ |
| |
|
| |
json语法规则： |
| |
01.对象表现形式 key:value 键值对 |
| |
02.多个数据之间使用逗号隔开 k1:v1,k2:v2 |
| |
03.把对象放进大括号中 ｛name:"小黑",age:18 ｝ |
| |
04.把集合放进中括号 [｛name:"小黑1",age:18 ｝,｛name1:"小黑2",age:18 ｝,｛name:"小黑3",age:18 ｝] |
| |
--> |
| |
|
| |
|
| |
</head> |
| |
<body> |
| |
<h1>json格式的对象</h1> |
| |
<div id="jsonObject"></div> |
| |
<h1>json格式的字符串数组</h1> |
| |
<select id="jsonArray"></select> |
| |
<h1>json格式的对象数组</h1> |
| |
<div id="jsonObjectArray"></div> |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> |
| |
<script type="text/javascript"> |
| |
$(function(){ |
| |
//01.定义json格式的对象 |
| |
var student={ |
| |
id:1, |
| |
name:"admin", |
| |
sex:"男", |
| |
age:18 |
| |
}; |
| |
//向jsonObject中拼接数据 |
| |
$("#jsonObject").append("ID:"+student.id+"<br/>"+"name:"+student.name+"<br/>") |
| |
.append("sex:"+student.sex+"<br/>"+"age:"+student.age+"<br/>") |
| |
//02.定义json格式的String类型的数组 |
| |
var arrays=["对象表现形式 key:value 键值对","多个数据之间使用逗号隔开","把对象放进大括号中","数组放进中括号中"]; |
| |
//把arrays转换成jquery对象 目的是 使用jquery对象特有的方法 |
| |
var $arrs=$(arrays); |
| |
// 遍历数组 $arrs 向jsonArray中拼接数据 |
| |
$arrs.each(function(i){ |
| |
$("#jsonArray").append("<option value='"+(i+1)+"'>"+this+"</option>") |
| |
}); |
| |
//03.定义json格式对象数组 List<Student> |
| |
var students=[ |
| |
{ |
| |
id:1, |
| |
name:"admin1", |
| |
sex:"男", |
| |
age:18 |
| |
}, |
| |
{ |
| |
id:2, |
| |
name:"admin2", |
| |
sex:"女", |
| |
age:81 |
| |
}]; |
| |
// 创建一个表格 |
| |
var $table=$("<table border='1'></table>") |
| |
.append("<tr><td>编号</td><td>姓名</td><td>性别</td><td>年龄</td></tr>") |
| |
//把数组转换成jquery对象 |
| |
$(students).each(function(){ |
| |
$table.append("<tr><td>"+this.id+"</td><td>"+this.name+"</td><td>"+this.sex+"</td><td>"+this.age+"</td></tr>") |
| |
}) |
| |
//把创建的表格放进Div中 |
| |
$("#jsonObjectArray").append($table); |
| |
}); |
| |
|
| |
|
| |
|
| |
</script> |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
</body> |
| |
</html> |
