admin JSON文件中的数据渲染到页面（jquery）
又又爱拍照
已于 2022-10-30 21:47:39 修改
377
收藏
文章标签： jquery json javascript
版权
首先我们先了解一下需要用到的东西：
①一个含有数据的JSON文件
②一个VS code插件（方法之一）live server(访问本地json文件存在跨域问题)
③一个jquery包
④我们分别采用jquery的each方法和for循环实现遍历
JSON文件
live server插件
①在VS code安装插件
②在引入本地json文件的html文件上单击右键，选择如图的open with Live Server
jquery包
官网下载：/download/
引入html文件
<script src="js/jquery-3.4.1.min.js"></script>
1
渲染实现
<!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" 选择器）。
1
2
此处的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>
————————————————
版权声明：本文为CSDN博主「又又爱拍照」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_48434912/article/details/127576922
0条评论