JSON学习

最新推荐文章于 2024-05-17 18:09:22 发布

吉择90

最新推荐文章于 2024-05-17 18:09:22 发布

阅读量134

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/weixin_56028872/article/details/127797101

版权

在前面一段时间学习javaweb的知识，因为以为是纯后端学习不需要前端知识，然后卡在了web中jsp的地方，发现需要一定的js技术才能解决，回过头学习js，最后到了json，json在js就是面向对象编程，在学习json给我印象最深的就是把java从数据库返回回来的json对象，传给前端页面需要的位置，例如table中的tbody标签：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>设置table的tbody</title>
    </head>
    <body>
      <script type="text/javascript">
        //有这些json数据
        var data = {
          "total":4,
          "emps":[
            {"empnum":7369,"ename":"SMITH1","sal":800.0},
            {"empnum":6435,"ename":"SMITH2","sal":900.0},
            {"empnum":7369,"ename":"SMITH3","sal":1000.0},
            {"empnum":7369,"ename":"SMITH4","sal":1100.0}
          ]
        };

        //希望把数据展示到table当中
        window.onload = function (){
          var disEle = document.getElementById("displayBtn");
          disEle.onclick = function (){
            var emps = data.emps;
            var html = "";
            for (let i = 0; i < emps.length; i++) {
              var emp = emps[i]
              html += "<tr>";
              html +="<td>"+emp.empnum+"</td>";
              html +="<td>"+emp.ename+"</td>";
              html +="<td>"+emp.sal+"</td>";
              html +="</tr>";
            }
            document.getElementById("emptbody").innerHTML = html;
            document.getElementById("count").innerText = data.total;
          }
        }
      </script>
      <input type="button" value="显示员工信息列表" id="displayBtn">
      <h2>员工信息列表</h2>
      <hr>
      <table border="1px" width="50%">
        <tr>
          <td>员工编号</td>
          <td>员工名字</td>
          <td>员工薪资</td>
        </tr>
        <tbody id="emptbody">
      <!--  <tr>
          <td>7739</td>
          <td>SMITH</td>
          <td>800</td>
        </tr>
        <tr>
          <td>7739</td>
          <td>SMITH</td>
          <td>800</td>
        </tr>
        <tr>
          <td>7739</td>
          <td>SMITH</td>
          <td>800</td>
        </tr>-->
        </tbody>
      </table>
      总共<span id="count">0</span>条数
    </body>

得出的效果就是通过一个按钮来把数据呈现出来