JavaScript基础(JSON基础)

最新推荐文章于 2024-05-18 12:54:41 发布

Xc_.xC

最新推荐文章于 2024-05-18 12:54:41 发布

阅读量1.1k

点赞数

文章标签： json javascript servlet

本文链接：https://blog.csdn.net/qq_52215881/article/details/127265197

版权

JSON介绍：

1,什么是JSON，有什么用？
avaScript Object Notation(JavaScript 对象标记法),简称JSON。(数据交换格式)

JSON 是一种存储和交换数据的语法。

JSON 是通过 JavaScript 对象标记法书写的文本。

JSON主要的作用是：一种标准的数据交换格式。(目前非常流行，90%以上的系统，系统A于系统B交换数据的话，都是采用JSON)

交换数据

当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。

JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。

我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。

以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

文本，是指书面语言的表现形式。

文本是计算机的一种文档类型。该类文档主要用于记载和储存文字信息，而不是图像、声音和格式化数据。常见的文本文档的扩展名有txt、doc、doc、wps等。

2,JSON是一种标准的轻量级的数据交换格式。

特点是：体积小，易解析

JSON 指的是 JavaScript 对象标记法（JavaScript Object Notation）
JSON 是一种轻量级的数据交换格式
JSON 具有自我描述性且易于理解
JSON 独立于语言*

3，在实际的开的中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。
XML体积较大，解析麻烦，但是它的优点是L:语法严谨(银行会使用)

4,JSON语法格式：
var jsonObj={
"属性名"：属性值,
"属性名"：属性值,
"属性名"：属性值,
......
};

在 JSON 中，值必须是以下数据类型之一：

字符串
数字
对象（JSON 对象）
数组
布尔
null

在 JavaScript 中，以上所列均可为值，外加其他有效的 JavaScript 表达式，包括：

函数
日期
undefined

注意：属性值可以是多个,需要使用 [属性值，属性值...... ]来表示。

属性值也可以是JSON格式的字符串（嵌套）

代码示例：

<!DOCTYPE html>
<html>
    <head>
        <title>JSON</title>
    </head>
    <body>
        <script type="text/javascript">

           //创建一个JSON对象(JSON也可以称为无属性的类)
           var studentObj={
                "sno":"110",
                "sname":"张三",
                "sex":"男"
           };
           //访问JSON对象的属性
           alert(studentObj.sno+","+studentObj.sname+","+studentObj.sex)
        
            //对比没有JSON的时候，定义类，创建对象，访问对象的属性
            //定义类
            Student=function(sno,sname,sex){
                this.sno=sno;
                this.sname=sname;
                this.sex=sex;
            }
           //创建对象
           var stu=new Student("111","lisi","男");
           alert(stu.sno+","+stu.sname+","+stu.sex);

           //JSON数组
            var students=[
                {"sno":"100","sname":"张三","sex":"男"},
                {"sno":"200","sname":"lisi","sex":"男"},
                {"sno":"300","sname":"wangwu","sex":"男"}];

            //遍历
            for(var i=0;i<students.length;i++){
                var stuObj=students[i];
                document.write(stuObj.sno+","+stuObj.sname+","+stuObj.sex);

            }
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>复杂一些的JSON对象</title>
    </head>
    <body>
        <script type="text/javascript">
            var user={
                "usercode":110,
                "username":"张三",
                "sex":true,
                "address":{
                    "city":"北京",
                    "stree":"大兴区",
                    "zipcode":"12122"
                },
                "aihao":["smoke","drink","tt"]
            };

            alert(user.address.city);

            /*
                设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息，以及总人数。
            */
           var students={
                "total":3,
                student:[
                    {},{},{}
                ]
           };
        </script>

    </body>
</html>

JS的eval函数

<!DOCTYPE html>
<html>
    <head>
        <title>eval函数</title>
    </head>
    <body>

        <!-- 
            JSON是一种业内的数据交换格式
            JSON在JS中以对象的形式存在。
         -->
        <script type="text/javascript">
            /*
                eval函数的作用是：
                    将字符串当作一段JS代码解释并执行。
            */

            window.eval("var i=100");
            alert("i="+i);//i=100

        //java连接数据库，查询数据之后，将数据在Java程序中拼接成JSON格式的"字符串"，将JSON格式的字符串相应到浏览器
        //也就是说Java响应到浏览器上的仅仅是一个JSON格式的字符串，这还不是一个JSON对象。
        //可以使用eval函数，将json格式的字符串转换成json对象。

        //这是Java程序发过来的json格式的"字符串"
        //\是转义符号，没有的话"号会被当作一个符号而不是字符串
        var fromjava="{\"name\":\"zhangsan\",\"password\":\"123\"}";
        //将以上的json格式的字符串转换成json对象
        window.eval("var jsonObj="+fromjava);
        alert(jsonObj.name);//zhangsan
       
       /*
            面试题：
                在JS当中：
                    []是数组
                    {}是JSON。
                Java中的数组：int[] arr={1,2,3,4};
                JS中的数组：var arr=[1,2,3,4];
                JSON:var JsonObj={"属性名":属性值,
                                    ......
                                    };         
       */

       var json={
        "username":"zhangsan"
       };
       //JS中访问JS的两种方式
       alert(json.username);
       alert(json["username"]);
       
       </script>
    </body>
</html>

设置table的tbody

注意：这里的例子是用JSON简单模拟Java传过来的数据，进行接收并输出

<!DOCTYPE html>
<html>
    <head>
        <title>设置table的tbody</title>
    </head>
    <body>
        <script type="text/javascript">
            //有这些JSON数据
            var data={
                "total":4,
                "emps":[
                    {"empno":7369,"ename":"SHITH","sal":800.0},
                    {"empno":7369,"ename":"SHITH","sal":800.0},
                    {"empno":7369,"ename":"SHITH","sal":800.0},
                    {"empno":7369,"ename":"SHITH","sal":800.0}
                ]
            };

            //希望把数据展示到table中
            window.onload=function(){
                var displayBtnElt=document.getElementById("displayBtn");
                displayBtnElt.onclick=function(){
                    //alert(111);
                    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>

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

引入外部JSON

JSON 文件的文件类型是 ".json"
JSON 文本的 MIME 类型是 "application/json"

一般在xx.json文件是这种形式

 {
    "bookname": "红楼梦",
     "writer":"曹雪芹",
     "sex":"女"
     
 }

在json文件中定义一个变量指向json数据（可能会报错，不过不用管，如果验证无法通过，导致无法保存，这种情况需要使用异步:ajax后面讲）。

 var s={
    "bookname": "红楼梦",
     "writer":"曹雪芹",
     "sex":"女"
     
 };

<!DOCTYPE html>
<html>
    <head>
        <title>引入外部json文件</title>
    </head>
    <body>
        <script type="text/javascript" src="/JSON02/data.json" ></script>
        <script type="text/javascript">
            document.write(s);
            //console.log(s);
            document.write(s.sex);
        </script>
    </body>
</html>

注意：

<!DOCTYPE html>
<html>
    <head>
        <title>引入外部json文件</title>
    </head>
    <body>
        <script type="text/javascript" src="/JSON02/data.json" >
            //这里的内容不会执行
            document.write(s);
            //console.log(s);
            document.write(s.sex);
        </script>
        <script type="text/javascript">
            document.write(s);
            //console.log(s);
            document.write(s.sex);
        </script>
    </body>
</html>