首页 前端知识 JSON文件中的数据渲染到页面(jquery)

JSON文件中的数据渲染到页面(jquery)

2024-02-02 09:02:26 前端知识 前端哥 613 764 我要收藏

首先我们先了解一下需要用到的东西:
①一个含有数据的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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1141.html
标签
json
评论
发布的文章

jQuery ---- 插件

2024-02-15 14:02:06

CSS-JavaScript-Jquery-Servlet

2024-02-15 14:02:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!