JSON文件中的数据渲染到页面（jquery）

又又爱拍照

已于 2022-10-30 21:47:39 修改

阅读量3.3k

点赞数 2

文章标签： jquery json javascript

于 2022-10-28 19:11:49 首次发布

本文链接：https://blog.csdn.net/qq_48434912/article/details/127576922

版权

首先我们先了解一下需要用到的东西：
①一个含有数据的JSON文件
②一个VS code插件（方法之一）live server(访问本地json文件存在跨域问题)
③一个jquery包
④我们分别采用jquery的each方法和for循环实现遍历

JSON文件

在这里插入图片描述

live server插件

①在VS code安装插件

在这里插入图片描述

②在引入本地json文件的html文件上单击右键，选择如图的open with Live Server

在这里插入图片描述

jquery包

官网下载：https://jquery.com/download/
在这里插入图片描述
引入html文件

<script src="js/jquery-3.4.1.min.js"></script>

渲染实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>json文件数据渲染</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <style>
    td{
      width: 120px;
      padding-left: 35px;
    }
  </style>
</head>

<body>
  <div>
    <table>
      <thead>
        <tr>
          <td>姓名</td>
          <td>身份证</td>
          <td>材料</td>
          <td>id</td>
        </tr>
      </thead >
      <tbody id="jsonTip">

      </tbody>
    </table>
  </div>


  <script>
    // 页面加载完后立刻调用getDate方法
    $(function () {
      getData();
    })

    // 获取json文件数据
    function getData(){
      $.getJSON("js/data.json",function(data){
        // 获取数据渲染的位置
          var $jsontip=$("#jsonTip");
          // 定义一个变量存储要显示的数据
          var s="";
          // 清空数据
          $jsontip.empty();
          // 遍历拿到的数据（此处采用each方法，也可以采用for循环）
          $.each(data.rows,function(index,info){
            s = "<tr><td>" + info.RealName + "</td><td>" + info.CardID + "</td><td>" +
            info.StuffPath + "</td><td>" + info.AdminId + "</td></tr>";
            // 将要展示的数据追加到页面
            $jsontip.append(s);
          })
          
        })
    }
    
  </script>

</body>
</html>

讲解each方法：

格式：$(selector).each(function(index,element))
参数：

	①index - 选择器的 index 位置。
	②element - 当前的元素（也可使用 "this" 选择器）。

此处的element（info）拿到的数据如下：
在这里插入图片描述

这里也可以使用for循环实现：

<script>
	 for(var i = 0; i < data.total; i++) {
          s = "<tr><td>" + info[i].RealName + "</td><td>" + info[i].CardID + "</td><td>" +
            info[i].StuffPath + "</td></tr>"+ "</td><td>" + info[i].AdminId + "</td></tr>";
          $("#jsonTip").append(s);
        }
</script>

又又爱拍照

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
2
评论
JSON文件中的数据渲染到页面（jquery）

首先我们先了解一下需要用到的东西：①一个含有数据的JSON文件②一个VS code插件（方法之一）③一个jquery包④我们分别采用jquery的each方法和for循环实现遍历。
复制链接

扫一扫