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

最新推荐文章于 2025-05-17 16:01:34 发布

原创最新推荐文章于 2025-05-17 16:01:34 发布 · 3.8k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了一个使用jQuery处理JSON数据的示例，演示了如何根据用户操作动态更新JSON对象并展示其内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上一篇示例中，使用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”值，最后将全部的内容显示在页面指定的元素中。