在初步了解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':'[email protected]'
};
$(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>