【JavaScript】JSON的使用

x33g5p2x  于2022-02-07 转载在 JavaScript  
字(4.1k)|赞(0)|评价(0)|浏览(423)

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

相关文章