当前位置:   article > 正文

JS—JSON的使用_js协议头json

js协议头json

目录

什么是JSON?

简单使用

eval函数(非常重要)

给表单添加数据

 面试题


什么是JSON?

 1、什么是JSON,有什么用?
    JavaScript Obiect Notation (JavaScript对象标记),简称JSON。(数据交换格式)

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

2、JSON是一种标准的轻量级的数据交换格式。特点是:体积小,易解析。
      在实际的开发中有两种数据交换格式,使用最多,其一是JSON,另一个是XML。

3、XML体积较大,解析麻烦,但是有其优点是,语法严谨。(通常银行相关的系统之间进行        数据交换的适会使用XML。)

简单使用

 

 JSON数组是外层是数组,元素是JSON

复杂一些的JSON

 

eval函数(非常重要)

 作用:将一段字符串当做JS代码来解释并执行。

第一句就相当于:var i = 100;效果一模一样 

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

给表单添加数据

需求: 点击按钮把从后台传过来的数据显示在表格,如下


HTML代码

  1. <input type="button" value="显示所有员工信息" id="displayBtn">
  2. <table width = 50%; border = 1px">
  3. <tr>
  4. <th>编号</th>
  5. <th>姓名</th>
  6. <th>薪资</th>
  7. </tr>
  8. <tbody id="emp_tbody">
  9. </tbody>
  10. </table>
  11. <p id="emp_total">总人工数:0</p>
JS代码
  1. <body>
  2. <script type="text/javascript">
  3. //模拟java传过来的json数据
  4. var emp_data = {
  5. "total" : 3,
  6. "emps" : [
  7. {"empno":001,"ename":"Kerry",sal:8000},
  8. {"empno":002,"ename":"Curry",sal:7000},
  9. {"empno":003,"ename":"KD",sal:9000}
  10. ]
  11. };
  12. //希望点击按钮把上面的数据放到下面的表格中
  13. window.onload = function(){
  14. var displayBtnElt = document.getElementById("displayBtn");
  15. displayBtnElt.onclick = function(){
  16. var emps = emp_data.emps;
  17. var html = "";
  18. for(var i = 0; i<emps.length; i++){
  19. var emp = emps[i];
  20. //每循环一次拼接一行html代码
  21. html +="<tr>";
  22. html += "<td>" + emp.empno + "</td>";
  23. html += "<td>"+emp.ename+"</td>";
  24. html += "<td>"+emp.sal+"</td>";
  25. html += "</tr>";
  26. }
  27. //循环结束后变量html已经拼接完了所有的员工信息
  28. //把它放到tbody中
  29. document.getElementById("emp_tbody").innerHTML = html;
  30. document.getElementById("emp_total").innerText = "总人数:"+emp_data.total;
  31. }
  32. }
  33. </script>
  34. </body>

 面试题

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/585190
推荐阅读
相关标签
  

闽ICP备14008679号