【JavaScript】JSON的使用

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

什么是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也可以称为无类型对象。轻量级,轻巧。体积小。易解析。)
 

  1. <script text/javasctipt>
  2.  var studentObj={
  3.     "sno":"110","sname":"张三","sex":"男"
  4. };
  5. //访间JSON对象的属性
  6. alert(studentObj.sno+","+studentObj.sname +","+ studentObj.sex)
  7. </script>

 创建JSON数组和遍历

  1. <script type="text/javascript">
  2. // JSON数组
  3. var students =[
  4. {"sno":"110","sname":"张三","sex":"男"},
  5. {"sno":"120","sname":"李四","sex":"男"},
  6. {"sno":"130", "sname":"王五","sex":"男"}
  7. ];
  8. // 遍历
  9. for(var i = 0; i<students.length; i++){
  10. var stuObj =students[i];
  11. alert(stuObj.sno+","+stuObj.sname+","+ stuObj.sex);
  12. }
  13. </script>

复杂一些的JSON对象

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

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

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

 eval函数

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

如: 

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

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

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

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

结果: 

 面试题:

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

           [ ]是数组

           { }是JSON对象

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

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

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

table的用法

  1. <script type="text/javascript">
  2. var data={
  3. "total" :4,
  4. "emps" :[
  5. {"empno" :110,"ename":"SMiTH","sal": 100},
  6. {"empno" :120,"ename":"SMiTH","sal": 100},
  7. {"empno" :130,"ename":"SMiTH","sal": 100},
  8. {"empno" :140,"ename":"SMiTH","sal": 100}
  9. ]
  10. };
  11. window.onload = function(){
  12. var displayBtnElt =document.getElementById("displayBtn");
  13. displayBtnElt.onclick =function(){
  14. var emps = data.emps;
  15. var html ="";
  16. for(var i = 0; i<emps.length; i++){
  17. var emp = emps[i];
  18. html += "<tr>";
  19. html +="<td>"+emp.empno+"</td>";
  20. html +="<td>"+emp.ename+"</td>";
  21. html +="<td>"+emp.sal+"</td>";
  22. html += "</tr>";
  23. }
  24. document.getElementById("emptbody").innerHTML=html;
  25. document.getElementById("count").innerHTML=data.total;
  26. }
  27. }
  28. </script>
  29. <input type="button" value="显示员工信息列表" id="displayBtn"/>
  30. <h2>员工信息列表</h2>
  31. <hr>
  32. <table border="1px" width="50%">
  33. <tr>
  34. <th>员工编号</th>
  35. <th>员工名字</th>
  36. <th>员工薪资</th>
  37. </tr>
  38. <tbody id="emptboy">
  39. </tbody>
  40. </table>
  41. 总共<span id="count"></span>

相关文章