JSON小demo及知识点_json数组demo-CSDN博客

本文链接：https://blog.csdn.net/saber04/article/details/95625981

该博客是博主学习时练习的静态JSON小demo，包含静态判断登录、对象字符串相互转换功能。介绍了JSON是轻量级文本数据交换格式，相比XML有书写简单、符合JS原生语法等优点，还讲解了JSON.stringify()和JSON.parse()方法的使用。

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

博主学习时练习的静态json小demo,有静态判断登录、对象字符串相互转换三个小功能

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式，目的是取代繁琐笨重的 XML 格式
相比 XML 格式，JSON 格式有两个显著的优点：

书写简单，一目了然；
符合 JavaScript 原生语法，可以由解释引擎直接处理，不用另外添加解析代码。

JSON 对值的类型和格式有严格的规定。

这里是引用复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
原始类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。
字符串必须使用双引号表示，不能使用单引号。
对象的键名必须放在双引号里面。
数组或对象最后一个成员的后面，不能加逗号。

JSON.stringify()

如果对象的属性是undefined、函数或 XML 对象，该属性会被JSON.stringify过滤。
如果数组的成员是undefined、函数或 XML 对象，则这些值被转成null。
正则对象会被转成空对象。

第二个参数

JSON.stringify方法还可以接受一个数组，作为第二个参数，指定需要转成字符串的属性。
第二个参数还可以是一个函数，用来更改JSON.stringify的返回值。函数接受两个参数，分别是被转换的对象的键名和键值。

第三个参数

JSON.stringify还可以接受第三个参数，用于增加返回的 JSON 字符串的可读性。如果是数字，表示每个属性前面添加的空格（最多不超过10个）；如果是字符串（不超过10个字符），则该字符串会添加在每行前面。

JSON.parse()

JSON.parse方法可以接受一个处理函数，作为第二个参数，用法与JSON.stringify方法类似。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>json</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 600px;
        }

        .sub {
            margin-left: 100px;
        }

        input {
            margin-top: 20px;
        }

        .change {
            display: block;
            margin-top: 20px;
        }

        .objChange {
            display: block;
            margin-top: 20px;
        }

        p {
            margin-top: 20px;
            height: 30px;
            display: block;
            white-space: pre-wrap
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="bodyContainer">
                姓名：<input type="text" class="name" placeholder="nihao"> <br>
                密码：<input type="password" class="pwd"> <br>
                <input type="submit" value="查询" class="sub">
                <button class="change">将json对象转换为字符串并显示(向服务器发送的数据为字符串，所以得转换为字符串)</button>
                <button class="objChange">将获取的字符串转换为js对象(从服务器获取的为字符串)</button>
            <p class="string"></p>
            <p class="obj"></p>
        </div>

    </div>
    <script>
        $(document).ready(function () {
            // json数组
            var info = [
                { "name": "张三", "pwd": "333", "height": "160cm", "weight": "120g" },
                { "name": "李四", "pwd": "444", "height": "170cm", "weight": "120g" },
                { "name": "中国队长", "pwd": "666", "height": "200cm", "weight": "140g" }
            ]
            //json对象
            var obj = {
                "name": "hello",
                "sex": "boy",
                "age": 10
            }
            //字符串
            var string = '{"name":"string","index":1}';
            var uname = $(".name");
            var upwd = $(".pwd");
            var x;
            //判断登录功能
            $(".sub").on("click", function () {
                Uname = uname.val();
                Upwd = upwd.val();
                console.log(Uname);
                for (x in info) {
                    if (info[x].name == Uname && info[x].pwd == Upwd) {
                        window.alert("name:" + info[x].name + " height:" + info[x].height + " weight:" + info[x].weight);
                        return;
                    }
                }
                window.alert("查询用户失败,请检查你的输入");
            })
            //将js对象转变为字符串
            $(".change").on("click", function () {
                var string = JSON.stringify(obj);
                $(".string").append(string);
            })
            //将字符串转换为js对象
            $(".objChange").click(function(){
                var obj = JSON.parse(string);
                $(".obj").prepend(obj.name+obj.index)
            })
        })

    </script>
</body>

</html>