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

98 阅读 0 评论 65 点赞

我是靠谱客的博主机智金毛，这篇文章主要介绍jQuery操作JSON数据（jQuery调用JSON数据学习第四天），现在分享给大家，希望可以做个参考。

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

示例：

（1）功能描述：

在页面中，当用户单击“原始数据”按钮时，将读取一个JSON格式的数据并将内容显示在页面中，同时按钮中的文字显示为“变化数据”，此时再单击按钮时，将读取一个变化后的JSON格式数据并将内容显示在页面中。

（2）实现代码：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<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>