通过使用getJSON异步获取json数据文件并绑定事件处理函数

1、json数据的格式

      1. “名称/值”对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），记录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组 （associative array）。

      2. 值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。

      

      下面我来举几个例子：

           对于这种构造方式的理解，它的优势在于可读性非常强，可以直观地看出具体的数据属性值是属于哪个部分属性比如：

           

           在“名称/值”中：{ "firstName": "xiaohong" }，这样很明显可以看出 firstName 的属性是 Brett，当然，这样做实际上比等效的纯文本 "名称 / 值对" 占用更多的空间：firstName=xiaohong。但是，如果是多个“名称/值”串接在一起的话就能够彰显出它的优势啦！如下所述：

           { "firstName": "xiaohong", "lastName":"xiaoming", "email": "www.email.com" }

          

           

           在这种记录表中最好的设计方式就是能够让程序员一目了然地看出哪个数据是属于谁的，除此之外还要减少复杂程度，这样操作起来也就方便一些，就比如操作一张数组性质表：

           

           { 

                    [

                            { "firstName": "xiaohong", "lastName":"xiaoming", "email": "www.email.com" },

                            { "firstName": "xiaohong", "lastName":"xiaoming", "email": "www.email.com"},

                            { "firstName": "xiaohong", "lastName":"xiaoming", "email": "www.email.com" }

                    ]

            }  这样就非常地直观方便。

           

            上面我们看到只是一个变量people的数据表，除了这个我们还可以进行存储多个变量的数据表，方法跟上述过程一样，如下：

             

           {

              "people": 

                                       [

                                             { "firstName": "xiaohong", "lastName":"xiaoming", "email": "www.email.com" },

                                             { "firstName": "xiaohong", "lastName":"xiaoming", "email": "www.email.com"},

                                             { "firstName": "xiaohong", "lastName":"xiaoming", "email": "www.email.com" }

                                       ],

               "man": 

                                       [                     

                                             { "firstName": "xiaohong", "lastName":"xiaoming", "email": "www.email.com" },

                                             { "firstName": "xiaohong", "lastName":"xiaoming", "email": "www.email.com"},

                                             { "firstName": "xiaohong", "lastName":"xiaoming", "email": "www.email.com" }

                                       ],

              "woman": [

                                             { "firstName": "xiaohong", "lastName":"xiaoming", "email": "www.email.com"},

                                             { "firstName": "xiaohong", "lastName":"xiaoming", "email": "www.email.com" }

                                 ]

           }

           以上就是关于json数据的存储格式

2、getJSON异步获取json数据

         我们在实际应用中一般获取的json数据是由一个变量组成的数组或者是多个变量组成的数组，所以我针对这两种数组给大家提供具体的获取步骤。

       1、一个变量

         假设有一个名叫downloadMessages.json的文件等待读取

        $.getJSON("downloadMessages.json", function (data) {
             var strHTML = "";//初始化保存内容变量
             $.each(data, function (infoIndex, info) {
             strHTML += "<tr>" +
             "<td>" + info["fileName"] + "</td>" +
             "<td>" + info["sendAuthor"] + "</td>" +
             "<td>" + info["email"] + "</td>" +
             "</tr>"; 
             }) $("#show-download-table").append(strHTML); 
        });

         使用each遍历data之后将strHTML缓存的数据追加到标签#show-download-table中去。这样我就实现了单个变量的json文件异步获取。

   2、多个变量

       假设有一个名叫workermember.json的文件等待读取

       $.getJSON("workermember.json", function (data) {
            var strHTML = "";
            for (var countryObj in data) {
                for (var cityObj in data[countryObj]) {
                     strHTML = "";
                     strHTML += "<tr>" +
                                "<td>" +
                                      data[countryObj][cityObj].fileName+
                                "</td>"+
                                "<td>" +
                                      data[countryObj][cityObj].sendAuthor+
                                "</td>" +
                                "<td>" +
                                      data[countryObj][cityObj].email+
                                "</td>" +
                          "</tr>"; 
                }$("#show-download-table").append(strHTML);
            }
        }

              使用两个for循环遍历data之后将strHTML缓存的数据追加到标签#show-download-table中去。这样我就实现了多个变量的json文件异步获取。

3、绑定事件处理函数

 这种异步获取的数据如果通过click进行事件的处理那是根本行不通，我已经试验过，所以，为了能够正常的处理操作异步获取的数据，我们采用jQuery.on()来实现，具体的操作和click没有很大的差别。实例代码如下：

     $("#box .box-ul li").on("click", function (event) {
          var index = $("#box .box-ul li").index(this);
          $(this).addClass("active").siblings().removeClass("active");
          $("#box div").eq(index).addClass("select").siblings().removeClass("select");
     });

     关于使用getJSON获取json数据的具体案例代码在这里就不给大家展示了，可以看看大神们的案例代码：http://www.jb51.net/article/36678.htm