文、意如
開放API:
https://data.moenv.gov.tw/api/v2/stat_p_119?api_key=e8dd42e6-9b8b-43f8-991e-b3dee723a52d&limit=1000&sort=ImportDate%20desc&format=JSON
程式碼:
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>環境部廢污水資料</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>廢污水產生與排放統計資料</h2>
<table>
<thead>
<tr>
<th>統計期</th>
<th>統計區</th>
<th>總產生量</th>
<th>市鎮產生量</th>
<th>工業產生量</th>
<th>農業產生量</th>
<th>總排放量</th>
<th>市鎮排放量</th>
<th>工業排放量</th>
<th>農業排放量</th>
</tr>
</thead>
<tbody id="data-body"></tbody>
</table>
<script>
$(document).ready(function(){
$.ajax({
url: "https://data.moenv.gov.tw/api/v2/stat_p_119?api_key=e8dd42e6-9b8b-43f8-991e-b3dee723a52d&limit=1000&sort=ImportDate%20desc&format=JSON",
type: "get",
dataType: "json",
success: function(info) {
const records = info.records;
records.forEach(function(item) {
const row = `
<tr>
<td>${item.item1}</td>
<td>${item.item2}</td>
<td>${item.value1}</td>
<td>${item.value2}</td>
<td>${item.value3}</td>
<td>${item.value4}</td>
<td>${item.value5}</td>
<td>${item.value6}</td>
<td>${item.value7}</td>
<td>${item.value8}</td>
</tr>`;
$('#data-body').append(row);
});
},
error: function() {
console.log("請求失敗");
}
});
});
</script>
</body>
</html>
Yiru@Studio - 關於我 - 意如
