iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 24
0
Modern Web

JS 學習歷程系列 第 24

嘿嘿!厲害啦! - 六角學院 JS 最終作業 (七)

今天來到最終作業的未篇,其實還有很多小東西要修理,但昨日火箭隊同學用愛的鞭策跟我說這主題己經太久了,最終作業不是就是魔王關卡的意思,多寫幾篇應該不為過吧?(咬指甲)

今天利用 AJAX 把資料接上吧:

原本我們利用一個 var allData 將所有資料全都丟在這裡,因為含括所有資料所以程式碼有上千行(如果可以換成現金有多好?),今天利用 AJAX 我們將整千筆的資料一起痛快刪除,改寫成:

//所有資料
var allData;

var xhr = new XMLHttpRequest();

xhr.open('get', 'https://data.kcg.gov.tw/api/action/datastore_search?resource_id=92290ee5-6e61-456f-80c0-249eae2fcc97', true)

xhr.send(null);

因為是非同步我們必需下個判斷式,確定資料己經匯入成功,才能往下跑出我們所需的資料:

xhr.onload = function () {
    // 資料載入
    if (xhr.status !== 200) { return; }
    var jsonObj = JSON.parse(xhr.responseText);
    allData = jsonObj.result.records;
}

然後我把當初呼叫 updateMenu 的 code 丟入 onload 裡面,也就是說確定有資料後,才開始執行 updateMenu 這件事,所以 onload 這個 functaion 會變成:

xhr.onload = function () {
    // 資料載入
    if (xhr.status !== 200) { return; }
    var jsonObj = JSON.parse(xhr.responseText);
    allData = jsonObj.result.records;
    
    updateMenu();
}

寫完 AJAX,這個專案大致完成 87趴,剩下的就交給未來的自己去修理了(喂)


上一篇
嘿嘿!厲害啦! - 六角學院 JS 最終作業 (六)
下一篇
我存進去了,我又取出來了! - localStorage 基本使用 (一)
系列文
JS 學習歷程30

尚未有邦友留言

立即登入留言