iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 18
1

今天算是番外篇,看到邦友-八八這篇文章開始串資料:電動機車充電站,就想結合一下之前學到的 jQuery ajax 接 OpenData,搭配 Bootstrap 做成動態表格。


程式碼先奉上

  • 可貼到 sublime 上,右鍵選擇 open in Broewser 開啟
    • 這次程式不需要用到 XAMPP,所以不需要放在專屬資料夾
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<title>Document</title>
	
	<script>
       $(function(){
            $.ajax({
                url: "https://api.kcg.gov.tw/Api/Service/Get/bf5d5f44-24e0-4177-93a2-3cd9539c082c",
                dataType: "json",
                success: show,
                error: function(){
                    alert("error");
                }
            });
        });
        function show(data){
        	console.log(data);
            console.log(data.data);
            let arryData = data.data
            arryData.forEach((x) => {
				document.getElementById('content_list').innerHTML +=
					'<tbody class="list">'
					+ '<tr><th class="charge">' + x.計費方式 + '</th>'
					+ '<th class="location">' + x.設置地點 + '</th>'
					+ '<th class="address">' + x.設置地址 + '</th></tr>'
					+ '</tbody>';
				});	
            }
    </script> 
                            
</head>
<body>
	<table id='content_list' class="table table-hover">
		<thead class="thead-dark">
			<tr>
				<th>收費</th>
				<th>地點</th>
				<th>詳細地址</th>
			</tr>
		</thead>		
	</table>
	
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</body>
</html>

jQuery ajax 接 OpenData

  • 資料來源: 高雄市電動機車充電站名稱及充電站地址
  • 官網資料:jQuery 如何接 JSON
    https://api.jquery.com/jQuery.getJSON/
  • 兩種方式
    • getJSON: 邦友-八八用的方法
    • ajax: 本次實作使用的

Bootstrap

原本的資料引入之後,不方便我們閱讀,所以需要做成表格

JSON 是甚麼?

  • JSON,全名 JavaScript Object Notation

是受到 JavaScript 物件實體語法啟發的傳輸格式,比起使用 XML 傳輸資料,JSON 格式在檔案大小上更為輕量,也是現在主流的傳輸格式。

總結

今天實作這個資料表,也遇到不少問題,怎麼接不到?接到了怎麼套用 Bootstrap?
解決問題,最後有成果,真的蠻有成就感的,你也一起來挑戰吧! GO GO GO!


上一篇
Day17 翻玩login.php
下一篇
Day19 翻玩 pcheck.php -Show me the code 完結
系列文
30天翻玩動態網站-會員需驗證才能看到部落格文章 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言