2.10 学习总结之 JQ加强

一、说在前面

昨天	完成了体温统计APP的编写
今天	学习json数据结构

二、学习总结

1、json数据结构

1）什么是json：

　　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。

2）json的数据格式（json的结构有两种结构）

第一种：对象结构：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，key的类型为字符串，value的类型可以是数字、字符串、数组、对象几种。

示例：描述一个用户：　　{"id":100,"username":"张三","age":28,"addr":"天津"}

第二种：数组结构：数组在js中是中括号“[]”括起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是数字、字符串、数组、对象几种。

（注意：在实际开发中，对象结构和数组结构会相互嵌套，相互包含）

3）json的转换工具

　　在实际的开发中，我j们经常会使用json串作为数据传输的载体，例如浏览器端页面中的js与服务端的数据交互，android/ios移动端与服务端的数据交互都大量使用json，但发现使用java代码手动拼接json串是一个很耗时很繁琐的事情，所以一批json的自动转换的工具出现了。即可以自动的将对象、数组、集合等转换成json串，也可以将一个json串转成对象、数组和集合。

4）常用的转换工具：

1> jsonlib：是一个java类库，开发时需要导入6个jar包

commons-beanutils-1.8.3.jar
commons-collections-3.2.1.jar
commons-lang-2.6.jar
commons-logging-1.1.1.jar
ezmorph-1.0.6.jar
json-lib-2.4-jdk15.jar

2> Gson：google的产品很多企业都在使用（我也在用）

3> FastJson：阿里巴巴技术团队的产品号称是最快的json转换工具

三、案例演示

1、单个对象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>json01</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

       <ul>

         <li id="bj" name="beijing">北京</li>

       </ul>

  </body>

  <script language="JavaScript">

    /**

     * 案例一

     *  {key:value,key:value}

     *

     * class Person{

     *       String firstname = "张";

     *    String lastname = "三丰";

     *    Integer age = 100;

     * }

     *

     * Person p = new Person();

     * System.out.println(p.firstname);

     */

    var person = {"firstname":"张","lastname":"三丰","age":100};

     //取出lastname

     alert(person.lastname);

     //取出age

     alert(person.age);

  </script>

</html>

2、数组

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>insertBefore.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

       <ul>

         <li id="bj" name="beijing">北京</li>

       </ul>

  </body>

  <script language="JavaScript">

   /**

     * 案例四

     * {

     *   "param1":[{key:value,key:value},{key:value,key:value}],

     *   "param2":[{key:value,key:value},{key:value,key:value}],

     *   "param3":[{key:value,key:value},{key:value,key:value}]

     * }

     *

     *

     */

     var json = {

                     "baobao":[

                                   {"name":"小双","age":28,"addr":"扬州"},

                                   {"name":"建宁","age":18,"addr":"紫禁城"},

                                   {"name":"阿珂","age":10,"addr":"山西"},

                               ],

                      "haohao":[

                                   {"name":"张爽","age":25,"addr":"吉林"},

                                   {"name":"舒洁","age":23,"addr":"赤峰"}

                               ]

                 };

    alert(json.haohao[1].name);

  </script>

</html>

3、数组对象混合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>insertBefore.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

       <ul>

         <li id="bj" name="beijing">北京</li>

       </ul>

  </body>

  <script language="JavaScript">

     /**

     * 案例五

     * {

     *   "param1":"value1",

     *   "param2":{},

     *   "param3":[{key:value,key:value},{key:value,key:value}]

     * }

     *

     *

     */

     var json = {

            "key1":"value1",

            "key2":{"firstname":"张","lastname":"三丰","age":100},

            "key3":[

                       {"name":"小双","age":28,"addr":"扬州"},

                       {"name":"建宁","age":18,"addr":"紫禁城"},

                       {"name":"阿珂","age":10,"addr":"山西"},

                   ]

     };

     alert(json.key2.lastname);

     alert(json.key3[2].name);

  </script>

</html>