Day18 jQuery ajax 接 OpenData feat Bootstrap

第 11 屆 iThome 鐵人賽

DAY 18

自我挑戰組

30天翻玩動態網站-會員需驗證才能看到部落格文章系列第 18 篇

11th鐵人賽 ajax jquery bootstrap json

sean666

2019-10-04 03:14:16

3673 瀏覽

分享至

今天算是番外篇，看到邦友-八八這篇文章開始串資料：電動機車充電站，就想結合一下之前學到的 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>