iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 25
0
Modern Web

菜鳥前端奮鬥史(欸?系列 第 25

Day25 「想要的參數在不同頁怎麼辦?」 ─ 把它們丟到網址上吧! - 使用網址傳參數

各位看官大家好,台嘎後,今天要來還週末債了
今日中部風光明媚,不過聽說好天氣只會持續到週四,大家要把握機會外出踏青呀 /images/emoticon/emoticon42.gif


上一回我們講到了可以透過給予 api 特定的參數(路線),來決定要取回27218筆資料中我們想要的那一小部分就好
但是現在我們的**「台中全公車路線」「(被點選的)公車路線到站時間顯示」**是兩頁不同的 .html

那我們要怎麼把這個在「第一頁(被點選的)公車路線編號」讓「第二頁」知道呢?

 
若去 Github 上看這個專案的 code
就會發現其實我把**「每筆路線自己的中文、英文名稱都寫進 href 網址上了」**

<a href="bus-way.html?Zh_tw=${items[i].SubRoutes[0].SubRouteName.Zh_tw}&En=${items[i].SubRoutes[0].SubRouteName.En}" class="busLink">
「會這麼長一串是因為我後來又加入了英文版本的路線,雖然英文版到現在還沒做完 ( 艸」

 
假使我們點選了 300號路線,那我們的網址後段就會是 bus-way.html?Zh_tw=300&En=300

這時候!

我們可以使用以下語法,把網址上 ? 後方的參數取下來!

var helper = {
   getParameterByName: function (name, url) {
       var regex, results;
       if (!url) {
           url = window.location.href;
       }
       name = name.replace(/[\[\]]/g, '\\$&');
       regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)', 'i');
       results = regex.exec(url);
       if (!results) {
           return null;
       }
       if (!results[2]) {
           return '';
       }
       return decodeURIComponent(results[2].replace(/\+/g, ' '));
   }
};
let roadLine = helper.getParameterByName("Zh_tw"); //取得 路線中文名稱
// 若是要用英文路線我們就改取("En")即可

這麼一來,我們就可以在第二頁使用 roadLine 變數來知道目前應該要去拉哪一條路線的到站資料回來嚕!


其實各大 Framework 或是 Library 都有類似 router 的方法來處理類似的情況
就可以省去寫兩頁 .html 還要彼此互傳參數、變數的問題了

欸?你問我為什麼不用?
因為 router 大佬它跟我不熟啊/images/emoticon/emoticon06.gif

對不起,之後我會好好研究的..真的 /images/emoticon/emoticon02.gif


補充資料


>>隊友任意門<<

我是小菜鳥阿陰,我們下次見!


上一篇
Day24 「準備接第二個 api 囉」 ─ 製作公車到站時間...欸?
下一篇
Day26 「親愛的,我把 api Call 爆了」 ─ status of 429 (Too Many Requests)
系列文
菜鳥前端奮鬥史(欸?30

尚未有邦友留言

立即登入留言