Js-JSON在开发中的使用

最新推荐文章于 2022-10-02 20:03:30 发布

fan__lee

最新推荐文章于 2022-10-02 20:03:30 发布

阅读量255

点赞数

分类专栏：前端笔记文章标签： 1024程序员节 json

本文链接：https://blog.csdn.net/fan__lee/article/details/109257978

版权

前端笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

什么是JSON,有什么用

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

<?xml version="1.0" encoding="GBK"?>
<students>
	<student sno="110">
		<sname>张三</sname>
		<sex>男</sex>
	</student>
	
	<student sno="111">
		<sname>张四</sname>
		<sex>男</sex>
	</student>
	
</students>

HTML和XML有一个父亲：SGML(标准通用的标记语言)
HTML主要用在页面展示。语法松散
XML主要用在数据存储和数据描述的：语法相当严格

JSON语法格式，以及访问方式：

    <body>
        <script type="text/javascript">
            //JSON也可以称为无类型类
            var student={
                "sno":10,
                "sname":"fan",
                "sex":"男"
            }

            //访问使用JSON对象的属性
            alert(student.sno+","+student.sname+","+student.sex)
alert(student["sno"]);
            //JSON数组
            var students = [
                {"sno":12,"sname":"fan","sex":"男"},
                {"sno":13,"sname":"fan2","sex":"女"}
            ];
            //遍历JSON数组,和JS相似，和java遍历对象数组
            for (var i = 0;i<students.length;i++){
                alert(students[i].sname+","+students[i].sno+","+students[i].sex)
            }
        </script>
    </body>

复杂一些的JSON对象

        <script type="text/javascript">
            var user = {
                "usercode":10,
                "username":"张三",
                "sex":true,
                "adress":{
                    "city":"北京",
                    "邮编":"111222",
                },
                "aihao":{"smoke":true,"烫头":false}
            }
            alert(user.aihao.烫头)
            //描述班级学生
            var jsonDate= {
                "total":3,
                "students":[
                    {"sno":12,"sname":"fan","sex":"男"},
                    {"sno":13,"sname":"fan2","sex":"女"}
                ],
            };
            //访问内容
            alert(jsonDate.students[1].sname);
        </script>

eval函数

eval的作用是：将一段JS代码解释并执行。

//如下：这是java程序发过来的json格式的"字符串"
 var formJava = "{\"name\":\"张三\",\"password\":\"123\"}";
window.eval("var jsonObj = " +formJava);
alert(jsonObj.password);

        <script type="text/javascript">
            window.eval("var i = 100;")
            alert("i=" + i)
            //java连接数据库，查询数据之后，将数据在java中拼接成的JSON格式的"字符串"，将JSON格式的字符串响应到浏览器
            //也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串"，还不是一个JSON对象
            //可以使用eval函数，将json格式的字符串转换成json对象。        
            //如下：这是java程序发过来的json格式的"字符串"
            var formJava = "{\"name\":\"张三\",\"password\":\"123\"}";
            window.eval("var jsonObj = " +formJava);
            alert(jsonObj.password);
        </script>

一个问题

[]和{}的区别：

在Js中：
	[] 是数组
	{}是JSON
在java中的数组：int[] t = {1,2,3,4}
js中的数组：int[] t = [1,2,3,4]
json中：var jsonObj = {"email":"123@qq.com","age":15};
json数组：var jsonObj = [
                    {"sno":12,"sname":"fan","sex":"男"},
                    {"sno":13,"sname":"fan2","sex":"女"}
                    ]

JSON在Js中以对象的形式存在。
如：jsonObj.age

设置table的tbody

    <body>
        <script type="text/javascript">
            //有这些json数据
            var data = {
                "total":4,
                "emps": [
                    {"empno":720,"empname":"张三","sal":800.0},
                    {"empno":721,"empname":"张四","sal":800.0},
                    {"empno":722,"empname":"张五","sal":800.0},
                    {"empno":723,"empname":"张流","sal":800.0}
                ],
            };
            window.onload = function (){
                var displayData = document.getElementById("displayData");
                displayData.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.empname+"</td>";
                        html += "<td>"+emp.sal+"</td>";
                        html += "</tr>";
                    }
                    var empsTbody = document.getElementById("empsTbody");
                    empsTbody.innerHTML = html;
                    document.getElementById("total").innerText = data.total;
                }
            }
        </script>
<!--        希望把员工数据展示出来-->
        <input type="button" value="显示员工信息" id="displayData">
        <table border="1px" cellspacing="0" width="50%" style=" text-align: center">
            <tr>
                <td>员工编号</td>
                <td>员工姓名</td>
                <td>员工工资</td>
            </tr>
            <tbody id="empsTbody">

            </tbody>
        </table>
        总人数为<span id="total">0</span>
    </body>