JavaScript JSON

Posted zsbenn

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript JSON相关的知识，希望对你有一定的参考价值。

　　　　　　　　　　1、什么是JSON，有什么用？
                    javascript Object Notation（JavaScript对象标记），简称JSON。(数据交换格式)
                    JSON主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON。）
                2、JSON是一种标准的轻量级的数据交换格式。特点是：
                    体积小，易解析。
                3、在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。
                    XML体积较大，解析麻烦，但是有其优点是：语法严谨。（通常银行相关的系统之间进行数据交换的话会使用XML。）
                4、JSON的语法格式：
                    var jsonObj = {
                        "属性名" : 属性值,
                        "属性名" : 属性值,
                        "属性名" : 属性值,
                        "属性名" : 属性值,
                        ....
                    };

基础操作

　　<body>
        <script type="text/javascript">
           // 创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析。)
            var studentObj = {
                "sno" : "110",
                "sname" : "张三",
                "sex" : "男"
            };
            
            // 访问JSON对象的属性
            alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);
            
            // JSON数组
            var students = [
                {"sno":"110","sname":"张三","sex":"男"},
                {"sno":"120","sname":"李四","sex":"男"},
                {"sno":"130","sname":"王五","sex":"男"}
            ];
            
            // 遍历
            for(var i = 0; i < students.length; i++){
                var stuObj = students[i];
                alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex);
            }
        </script>
    </body>

复杂的json数据格式

　　<body>
        <script type="text/javascript">
            var user = {
                "usercode" : 110,
                "username" : "张三",
                "sex" : true,
                "address" : {
                    "city" : "北京",
                    "street" : "大兴区",
                    "zipcode" : "12212121",
                },
                "aihao" : ["smoke","drink","tt"]
            };
            
            // 访问人名以及居住的城市
            alert(user.username + "居住在" + user.address.city);
            
            /*描述整个班级中每一个学生的信息，以及总人数信息。*/
            var jsonData = {
                "total" : 3,
                "students" : [
                    {"name":"zhangsan","birth":"1980-10-20"},
                    {"name":"lisi","birth":"1981-10-20"},
                    {"name":"wangwu","birth":"1982-10-20"}
                ]
            };
        </script>
    </body>

使用eval函数将获取的java字符串转化为json并解析

　　<body>
        <!--JSON是一种行业内的数据交换格式标准。JSON在JS中以JS对象的形式存在。-->
        <script type="text/javascript">
            /*eval函数的作用是：
                将字符串当做一段JS代码解释并执行
                window.eval("var i = 100;");
                alert("i = " + i);
           */
           // java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器
           // 也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象.
           // 可以使用eval函数,将json格式的字符串转换成json对象.
           var fromJava = "{"name":"zhangsan","password":"123"}"; //这是java程序给发过来的json格式的"字符串"
           // 将以上的json格式的字符串转换成json对象
           window.eval("var jsonObj = " + fromJava);
           // 访问json对象
           alert(jsonObj.name + "," + jsonObj.password); // 在前端取数据.</script>
    </body>

应用：解析json数据，将其更新到table上

<body>
        <script type="text/javascript">
            // 有这些json数据
            var data = {
                "total" : 4,
                "emps" : [
                    {"empno":7369,"ename":"SMITH","sal":800.0},
                    {"empno":7361,"ename":"SMITH2","sal":1800.0},
                    {"empno":7360,"ename":"SMITH3","sal":2800.0},
                    {"empno":7362,"ename":"SMITH4","sal":3800.0}
                ]
            };
            
            // 希望把数据展示到table当中.
            window.onload = function(){
                var displayBtnElt = document.getElementById("displayBtn");
                displayBtnElt.onclick = function(){
                    var emps = data.emps;
                    var html = "";
                    for(var i = 0; i < emps.length; i++){
                        var emp = emps[i];
                        html += "<tr>";
                        html += "<td>"+emp.empno+"</td>";
                        html += "<td>"+emp.ename+"</td>";
                        html += "<td>"+emp.sal+"</td>";
                        html += "</tr>";
                    }
                    document.getElementById("emptbody").innerHTML = html;
                    document.getElementById("count").innerHTML = data.total;
                }
            }
        </script>

        <input type="button" value="显示员工信息列表" id="displayBtn" />
        <h2>员工信息列表</h2>
        <hr>
        <table border="1px" width="50%">
            <tr>
                <th>员工编号</th>
                <th>员工名字</th>
                <th>员工薪资</th>
            </tr>
            <tbody id="emptbody"></tbody>
        </table>
        总共<span id="count">0</span>条数
    </body>

 

以上是关于JavaScript JSON的主要内容，如果未能解决你的问题，请参考以下文章

使用JavaScript在页面上显示JSON

Xitrum学习笔记08 - JavaScript and JSON

vs code 自定义代码片段

前端开发工具vscode如何快速生成代码片段

Pentaho JavaScript JSON - 基于键将 json 对象连接到现有的 JSON 文档中

AJAX 响应：数据（JSON、XML）还是 HTML 片段？ [关闭]