博客园 首页 私信博主 显示目录 隐藏目录 管理 动画 动画

json格式

<!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>
posted @ 2017-11-04 20:07  这才是真的阿呆云飞  阅读(939)  评论(0)    收藏  举报