首先我们先了解一下需要用到的东西：
①一个含有数据的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>
