adminJSON文件中的數據渲染到頁麪（jquery）
又又愛拍照
已於 2022-10-30 21:47:39 脩改
377
收藏
版權
首先我們先了解一下需要用到的東西：
①一個含有數據的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
![[Java中將數據轉JSON]](/pic/[Java中將數據轉JSON].jpg)
0條評論