jQuery操作JSON数据（jQuery调用JSON数据学习第四天）

       在上一篇示例中，使用jQuery中的全局函数$.each遍历JSON对象，获取“name”对应的“value”值。另外，当获取JSON对象后，还可以对原有的JSON数据中的“value”值进行修改，实现的方法就是找到该对象中需要修改的“name”名称，并对该名称重新进行赋值。

示例：

（1）功能描述：

         在页面中，当用户单击“原始数据”按钮时，将读取一个JSON格式的数据并将内容显示在页面中，同时按钮中的文字显示为“变化数据”，此时再单击按钮时，将读取一个变化后的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/css">
var strInfo = "{
'name':'tgr','sex':'男',
'email':'tao_guo_rong@163.com',
'detal':1349340837359
}";
$(function(){
//指定按钮文字变量
var strV0 = "原始数据"；
var strV1 = "变化数据";
$("#Button1").click(function() {
//按钮单击事件
var strHTML = "";
//初始化保存内容变量
var objInfo = eval('(' + strInfo + ')');
//将字符串转成JSON对象
//根据按钮文字改变JSON对象中的值
if ($(this).val() == strV1){
objInfo.date = new Data().getTime();
}
strHTML += "姓名：" + objInfo.name + "<br>";
strHTML += "性别：" + objInfo.sex + "<br>";
strHTML += "邮箱：" + objInfo.email + "<br>";
strHTML += "时间：" + objInfo.date + "<br>";
//切换按钮显示的文字
if ($(this).val() == strV0){
$(this).val(strV1);
}else{
$(this).val(strV0);
}
//显示处理后的数据
$("#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数据。

         如果按钮文本内容为“原始数据”，则单击该按钮时，先将文字串通过eval（）方法转换成JSON格式的对象，再以“对象，属性”的方式读取JSON格式数据值中的各个“value”值，并以叠加的形式保存在变量中，最后指定的元素将变量中的内容显示在页面中。

         当按钮文本内容为“变化数据”时，如果单击该按钮，则在字符串转换成JSON格式对象之后，采用“对象，属性”的方式对“date”名称进行再次赋值，并以同样的方式读取修改后的“value”值，最后将全部的内容显示在页面指定的元素中。

最后

以上就是机智金毛为你收集整理的jQuery操作JSON数据（jQuery调用JSON数据学习第四天）的全部内容，希望文章能够帮你解决jQuery操作JSON数据（jQuery调用JSON数据学习第四天）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。