Js-JSON在开发中的使用

  • 时间:
  • 来源:互联网
  • 文章标签:

文章目录

    • 什么是JSON,有什么用
    • JSON语法格式,以及访问方式:
    • 复杂一些的JSON对象
    • eval函数
    • 一个问题
    • 设置table的tbody

什么是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>

本文链接http://www.taodudu.cc/news/show-1782152.html