【AJAX】用JQuery寫法實作資料介接JSON

使用JQuery作法，從農業部資料開放平台透過資料介接方式，取得「農村地方美食小吃特色料理」的JSON資料，並呈現在頁面上。

JavaScript（參考）：
<!-- 引用Jquery 必要條件-->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {           //整份文件載入後才執行
        var dataurl = "https://data.moa.gov.tw/Service/OpenData/ODwsv/ODwsvTravelFood.aspx";   //存放伺服器位置或json檔
        $.ajax({                   //呼叫$.ajax()函式
            url: dataurl,         //指定伺服器位置或json檔
            type: 'GET',        //指定伺服器要執行的動作
            success: function (data) {     //存取成功會執行success函式

                            //處理回傳的資料，data即是回傳的資料
                alert("農村地方美食小吃特色料理共" + data.length + "筆記錄");
                for (var i = 0; i < data.length; i++) {
                    $("#tableshow").append
                        (
                        "<tr>" +
                        "<td>" + data[i].ID + "</td>" +
                        "<td>" + data[i].Name + "</td>" +
                        "<td>" + data[i].Address + "</td>" +
                        "<td>" + data[i].Tel + "</td>" +
                        "<td>" + data[i].HostWords + "</td>" +
                        "<td><img src='" + data[i].PicURL + "' style='width:200px;'></td>" +
                        "<td><a href='https://www.google.com.tw/maps/place/" + data[i].Address + " 'target='_blank' class='btn btn-info'>地圖 </td>" +
                        "</tr>"
                        );
                }    //for
            }       //function (data)
        });
    });
</script>

HTML（參考）：
<h2>農村地方美食小吃特色料理</h2>
<table class="table" id="tableshow">
    <tr>
        <th>ID</th>
        <th>名稱</th>
        <th>地址</th>
        <th>電話</th>
        <th>說明</th>
        <th>照片</th>
        <th></th>
    </tr>
</table>

JSON畫面（參考）︰

執行畫面︰


參考資料：
https://data.moa.gov.tw/
農業部資料開放平台

https://data.moa.gov.tw/open_detail.aspx?id=193
農業部資料開放平台－農村地方美食小吃特色料理

https://data.moa.gov.tw/Service/OpenData/ODwsv/ODwsvTravelFood.aspx
農業部資料開放平台－農村地方美食小吃特色料理「資料介接」