jQuery中的全局函数getJSON()(ajax在jQuery中的运用学习第三天）

        load（）方法可以很快加载数据到页面（但有时需要对获取数据进行处理）；如果将用load（）方法获取内容进行遍历，也可进行数据处理，但是这样必须将获取的内容插入到页面中。（效率不高）

        为了采取另外一种轻量级的数据交互格式（即json文件格式，十分方便计算机读取，在jQuery中专门有一个全局函数getJSON(),用于调用JSON格式的数据）

         调用语法格式：$.getJSON( url , [datal] , [callback] );参数url表示请求地址，可选[data]参数表示发送到服务器数据，其格式为key/value。另外一个可选项[callback]参数表示加载成功时执行的回调函数。

示例    使用全局函数getJSON（）实现异步获取数据

（1）功能描述

创建一个JSON格式的文件UserInfo.json ，用于保存信息，另外，新建一个页面，在点击“获取数据”按钮时，将通过全局函数getJSON()获取文件UserInfo.json里面的数据，然后展现在页面里面。

（2）核心代码

<script type="text/javascript" src="jscript/jquery-1.8.2.3min.js"></script>

<script type="text/javascript">

            $(function () {

                        $("#Button1").click(function(){        //按钮单击事件

                                    //打开文件，并通过回调函数处理获取的数据

                                    $.getJSON("UserInfo.json",function(data){

                                                    $("#divTip").empty();        //先清空标记中的内容

                                                    var strHTML = "";            //初始化保存内容变量

                                                    //遍历获取的数据

                                                    $.each(data , function(InfoIndex , Info){

                                                            strHML += "姓名: " + Info["name"] + "<br>";

                                                            strHML += "性别: " + Info["sex"] + "<br>";

                                                            strHML += "邮箱: " + Info["email"] + "<br>";

                                                    })

                                                 $("#divTip").html(strHTML);         //显示处理后数据

                                        })

                            })

            })

</script>

<div    class="divFrame">

        ......省略

</div>

创建文本文件，另存为JSON文件

[

    {

        "name":"陶国荣"，

        "sex":"男"，

        "email":"tao_guo_rong@163.com"

    },

    {

        "name":"李建洲"，

        "sex":"女"，

        "email":"xiaoli@163.com"

    }

解析：

在点击按钮时，使用全局函数$。each()遍历所获取的数据data，在遍历数据前，先清空ID号为“divTip”元素中的内容，以确保重新构建HTML内容，然后通过当前项['元素名称']的方式获取每一项的数据，最后将叠加的数据显示在ID号为“divTip”的元素里面。