jQuery读取JSON数据（jQuery调用JSON数据学习第二天）

        在初步了解JSON数据格式之后，接下来学习jQuery框架下，如何读取一个JSON数据。

        由于JSON格式是JavaScript的原生态格式，因此，使用jQuery访问JSON数据时十分方便的，只需要将一个JSON格式的数据赋值给一个变量，就可以通过点号“.”，以“变量名，记录名称”的形式读取名称对应的值。

（1）功能描述

        在页面中，当用户单击“获取数据”按钮时，将读取一个JSON格式数据，并将读取的内容显示在页面中。

（2）实现代码

        <script  src="Jscript/jquery-1.8.2.min.js"  type="text/javascript"></script>

        <style  type="text/css">

                body{font-size:13px}

                .iframe{width:260px;border:solid  1px  #666}

                .iframe  .title{padding:5px;background-color:#eee}

                .iframe  .content{padding:8px;font-size:12px}

                .btn{border:#666  1px  solid;padding:2px;width:80px;

                filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9D8);}

        </style>

        <script  type="text/javascript">

                var  objInfo  =  {

                        'name':'tgr',

                        'sex':'man',

                        'email':'tao_guo_rong@163.com'

                };

                $(function (){

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

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

                                strHTML  +=  "姓名："  +  objInfo.name  +  "<br>";

                                strHTML  +=  "性别："  +  objInfo.sex  +  "<br>";

                                strHTML  +=  "邮箱："  +  objInfo.email  +  "<hr>";

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

                        });  ;

                });

        </script>

        <div  class="iframe">

                    <div  class="title">

                                 <input  id="Button1"  type="button"  class="btn"  value="获取数据"  />

                    </div>

                    <div  class="content">

                            <div  id="Tip"></div>        

                    </div>

        </div>

(3)代码解析

        在示例中，先将一个JSON格式的数据赋值给变量“objInfo”,当用户单击“获取数据”按钮时，以“变量名.名称”的方式读取JSON中名称对应的值，并将该值的内容已累加的方式进行保存在变量“srtHTML”中，将变量的内容显示在ID号为“Tip”的元素中，实现读取并显示JSON格式数据的功能。