JSON的使用

举报
执久呀 发表于 2022/02/18 12:06:58 2022/02/18
【摘要】 ​目录什么是JSON,有什么用?JSON的语法格式: 创建JSON数组和遍历复杂一些的JSON对象 eval函数 面试题:什么是JSON,有什么用?JSON是一种行业内的数据交换格式标准,JSON在JS中以JS对象的形式存在JavaScript Object Notation(JavaScript对象标记),简称JSON。(数据交换格式)JSON主要的作用是:一种标准的数据交换格式。(目前非...


目录


什么是JSON,有什么用?

JSON的语法格式:

 创建JSON数组和遍历

复杂一些的JSON对象

 eval函数

 面试题:


什么是JSON,有什么用?

JSON是一种行业内的数据交换格式标准,JSON在JS中以JS对象的形式存在

JavaScript Object Notation(JavaScript对象标记),简称JSON。(数据交换格式)
JSON主要的作用是:一种标准的数据交换格式。(目前非常流行。90%以上的系统,系统A与系统B交换数据的话,都是采用JSON。)

2、JSON是一种标准的轻量级的数据交施格式。特点是:体积小,易解析

3、在实际的开发中有两种数据文换格式,使用最多,其一是JSON,另一个是XML。XML体积较大,解析麻频,但是有其优点是:语法严谨。(通常银行相关的系统之间进行数据交换的话会使用XML。)

JSON的语法格式:

var  jsonObj={

                "属性名" :属性值,

                "属性名" :属性值,

                "属性名" :属性值,

                  ...........


//创建JSON对象(JSON也可以称为无类型对象。轻量级,轻巧。体积小。易解析。)
 

  <script text/javasctipt>
 var studentObj={
    "sno":"110","sname":"张三","sex":"男"
};

//访间JSON对象的属性
alert(studentObj.sno+","+studentObj.sname +","+ studentObj.sex)
   </script>

 创建JSON数组和遍历

<script type="text/javascript">
// 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>

复杂一些的JSON对象

json对象里面可以包含json对象,和数组之类的数组用下标访问即可

访问对象用"."即可访问,如访问aihao中的"drink",user.address.aihao[1]

  <script type="text/javascript">
    var user ={
        "usercode":110,"username":"王五",
        "sex":["男","女"],
        "address":{
              "city":"北京",
              "street":"大兴区",
              "zipcode":"12212121",
              "aihao" : ["smoke","drink","tt"]
         }
   }
      // 访问人名以及居住的城市
      alert(user.username+user.sex[0]+",居住在"+user.address.city+",喜欢"+user.address.aihao[0]);
      </script>

 eval函数

eval函数的作用是:
将字符串当做一段JS代码解释并执行。

如: 

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

 Java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”将JSON格式的字符串响应到浏览器

也就是说Java响应到浏览器上的仅仅是一个"JSON格式的字符串”还不是一个JSON对象。
可以使用eval图数,将JSON格式的字符串转换成JSON对象。

  <script type="text/javascript">
    //这是java程序给发过来的ison格式的"字符串”//将以上的json格式的字符串转换成json对象 
    var fromJava="{\"name\":\"zhangsan!\",\"password\":\"123456\"}";
    window.eval("var jsonObj="+fromJava);//相当于用jsonObj创建了对象
    // 访问json对象
    alert(jsonObj.name +","+jsonObj.password);// 在前端取数据。
    </script>

结果: 

 面试题:

在JS中:[ ]和 { }有什么区别?

             [ ]是数组

             { }是JSON对象

java中的数组:int arr={1,2,3,4};

js中的数组:var arr=[1,2,3,4];

JSON中的数组: var jsonObj={"name ": "张三","age":"12"};

table的用法

  <script type="text/javascript">
    var data={
        "total" :4,
        "emps" :[
            {"empno" :110,"ename":"SMiTH","sal": 100},
            {"empno" :120,"ename":"SMiTH","sal": 100},
            {"empno" :130,"ename":"SMiTH","sal": 100},
            {"empno" :140,"ename":"SMiTH","sal": 100}
       ]
    };
    
    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="emptboy">
    </tbody>
    </table>
    总共<span id="count"></span>

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。