JSON字符串与对象的应用解析

天涯幺妹

已于 2024-07-22 15:12:32 修改

阅读量440

点赞数 5

分类专栏： web前端技术移动应用开发毕业设计与项目实战文章标签： json 前端框架 javascript jquery 前端 xml

于 2024-07-22 11:09:08 首次发布

本文链接：https://blog.csdn.net/sinat_30844883/article/details/140603365

版权

毕业设计与项目实战同时被 3 个专栏收录

42 篇文章 1 订阅

订阅专栏

web前端技术

32 篇文章 1 订阅

订阅专栏

移动应用开发

7 篇文章 0 订阅

订阅专栏

内容导读

JSON定义与作用
JSON语法格式
JSON案例解析

一、JSON定义与作用

1. JSON的全称Javascript object notation（js的对象标识），其表现形式就是包含键-值对的字符串或js对象，主要用于网络数据的传输。

早期网络数据传递，常用xml文件，但其应用比较复杂。JSON字符串传输量大，格式简单，兼容性好，解析与应用方便，是当下非常流行的数据传递方式。

2. JSON字符串的一般格式

{

"name":"李美丽",

"gender":"女",

"age":19

}

以上"name"、"gender"、"age"为键，而"李美丽"、“女”、19为对应的值。

提示：标准json字符串中的键与值要用双引号括起来，值如果是数值型可以不用括。

3. JSON的解析与序列化

（1）取值时需要将JSON格式的字符串转换为js对象，然后再通过js对象的属性取值，这个过程我们通常称为JSON的解析。

可以直接使用JSON工具来实现，比如：JSON.parse(json字符串);

（2）进行网络等数据传递时，我们需要将js对象转换为json格式的字符串，此过程通常称为对象的序列化。

也可以直接使用JSON工具完成，比如：JSON.stringfy(js对象);

二、JSON语法格式

1. 在前端js中直接通过JSON工具的相关接口完成JSON字符串的解析，在Java中需要导入JSON解析包或库完成解析功能。

2. JSON字符串的多种格式

（1）一般格式

{

属性1:值1,

属性2:值2,

属性3:值3

}

（2）数组格式

[{属性1:值1,属性2:值2,属性3:值3},{属性1:值1,属性2:值2,属性3:值3},{属性1:值1,属性2:值2,属性3:值3}]

（3）混合格式

{

"addr":"沈阳市有钱大街",

"one":{"name":"tom","gender":"男"},

"arr":[{属性1:值1,属性2:值2,属性3:值3},{属性1:值1,属性2:值2,属性3:值3},{属性1:值1,属性2:值2,属性3:值3}]

}

三、JSON案例解析

下面我们来考察一下json字符串的实际应用吧！

1. jquery文件myjson.js

//jquery代码预加载,格式一：$(function(){            });
//格式二：
// $(document).ready(function (){
//
// });
1.json字符串的解析一
var go1 = function () {
    var dv1 = $(".dv1");
    var btn1 = $(".btn1");
//声明json字符串
    var json1 = '{"name":"胡晓婷","gender":"女","age":19}';
//转换为json对象
    var obj1 = JSON.parse(json1);
    var n = 1;
    btn1.click(function () {
        if (n == 1) {
            //解析json对象
            var str = '姓名:' + obj1.name + ' 性别:' + obj1.gender + ' 年龄：' + obj1.age;
            dv1.text(str);
            n = 2;
        } else if (n == 2) {
            //声明一个对象,准备解析为字符串
            var o1 = {
                name: "大法师",
                level: 60
            }
            //转成json字符串
            var str = JSON.stringify(o1);
            dv1.text(str);
            n = 1;
        }
    });
}//go1
//方法调用
go1();

2.json字符串的解析二
var go2 = function () {
    var dv2 = $(".dv2");
    var btn2 = $(".btn2");
//声明json字符串
    var json2 = '[{"name":"李好","gender":"女","age":18},{"name":"胡晓婷","gender":"女","age":19},' +
        '{"name":"李真帅","gender":"男","age":20}]';
//转换为json数组对象
    var obj2 = JSON.parse(json2);
    var n = 1;
    btn2.click(function () {
        if (n == 1) {
            //解析json数组
            var temp = "";
            for (var i = 0; i < obj2.length; i++) {
                temp += obj2[i].name + "-" + obj2[i].gender + "-" + obj2[i].age + "<br/>";
            }
            //通过标签输出显示内容
            dv2.html(temp);
            n = 2;
        } else if (n == 2) {
            //手写js数组对象
            var arr = [{name: "tom", age: 18}, {name: "bean", age: 20}, {name: "mary", age: 18}];
            //反解析为json字符串
            var str = JSON.stringify(arr);
            dv2.text(str);
            n = 1;
        }
    });
}//go2
//方法调用
go2();

3.json字符串的解析三
var go3 = function () {
    var dv3 = $(".dv3");
    var btn3 = $(".btn3");
    //声明混合式的json字符串
    var json3 = '{"addr":"沈阳市和平区祥瑞小区","arr":[{"name":"李好","gender":"女","age":18},{"name":"胡晓婷","gender":"女","age":19},' +
        '{"name":"李真帅","gender":"男","age":20}],"fool":{"name":"张三","money":998888}}';
    //将json字符串转换为json对象
    var obj3 = JSON.parse(json3);
    //声明的标识
    var n = 1;
    btn3.click(function () {
        if (n == 1) {
            var str = "";
            //直接取值
            str += "地址：" + obj3.addr + "<br/>";
            //取数组对象
            var arr = obj3.arr;
            for (var i = 0; i < arr.length; i++) {
                str += arr[i].name + "-" + arr[i].gender + "-" + arr[i].age + "<br/>";
            }//for
            str += obj3.fool.name + "-" + obj3.fool.money;
            dv3.html(str);
            n = 2;
        } else if (n == 2) {
            //手写js复杂对象,java如何实现
            var mixobj = {
                arr: [{name: "tom", face: 98}, {name: "mary", face: 99}],
                pet: {pname: "小黄", value: 218},
                addr: "沈阳市高新区"
            }
            var str = JSON.stringify(mixobj);
            dv3.text(str);
            n = 1;
        }//else
    });
}//go3
//调用方法
go3();

2. 网页文件myjson.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>json字符串解析</title>
    <link rel="stylesheet" href="css/myjson.css">
</head>
<body>
<h2>1.json的一般格式</h2>
<div class="dv1"></div>
<input type="button" class="btn1" value="json解析一">
<h2>2.json的数组格式</h2>
<div class="dv2"></div>
<input type="button" class="btn2" value="json解析二">
<h2>3.json的混合格式</h2>
<div class="dv3"></div>
<input type="button" class="btn3" value="json解析三">
</body>
<!--导入jquery库-->
<script src="js/jqmin1.9.1.js"></script>
<script src="js/myjson.js"></script>
</html>

更多内容请关注本站其他分享！！！

天涯幺妹

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JSON字符串与对象的应用解析

JSON的全称Javascript object notation（js的对象标识），其表现形式就是包含键-值对的字符串或js对象，主要用于网络数据的传输。早期网络数据传递，常用xml文件，但其应用比较复杂。JSON字符串传输量大，格式简单，兼容性好，解析与应用方便，是当下非常流行的数据传递方式。
复制链接

扫一扫

专栏目录