iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 16
1
自我挑戰組

網頁學習日誌系列 第 16

AJAX : 網頁顯示資料-JS篇

在此先用javascript抓遠端資料(JSON格式)到網頁,並把它轉成文字顯示在網頁上。

html:

功能是按下按鈕下方就會顯示遠端抓取的文字

<button class="btn">遊樂園資訊</button> //按下按鈕顯示下方內容
<ul class="info">
// json資料轉成li顯示於此
</ul>

javascript:

先定義一個新的XMLHttpRequest,並且藉由它來onload 資料,因為目前只是要得到資料並顯示在網頁,所以send設定為空值。

xhr.open('get','https://ruienyuski.github.io/git_test/data.json',true);
xhr.send(null);
xhr.onload = function(){
};//onload 資料有回傳時(readyStatus:4)就可執行function

然後要把json轉成物件可方便javascript抓取,則用到下面語法:

var datastr = JSON.parse(xhr.responseText);
// JSON.parse是string轉object,方便撈取資料
// xhr.responseText 獲得字符串形式的響應數據。

W3C :
json.parse解釋:
https://www.w3schools.com/js/js_json_parse.asp
xhr.responseText解釋:
http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_response.asp

轉成物件後,現在來利用javascrip處理顯示在網頁上的工作:

  1. 定義「按鈕」和「清單元件」

  2. 定義「物件長度」和「空字串」,是為了跑for迴圈和把抓到的資料組合後放入「空字串」中

    //1.定義按鈕和清單ul
    var info = document.querySelector('.info');
    var btn = document.querySelector('.btn');
    //2.定義json物件長度和str空字串
    var len = datastr.length;//定義長度,跑for迴圈
    var str= "";//抓到的遠端資料組合後放在這

for迴圈處理:

  1. 定義 「content」並在此組合迴圈資料,console結果如下:
    https://ithelp.ithome.com.tw/upload/images/20200411/201073218FpE0ZzPLn.png

  2. 迴圈的內容「content」放入str空字串中,如果沒用「+=」只會跑一筆資料。

  3. 最後再for 迴圈外層加上innerHTML資料排到ul下層,成為ul li清單列了。

    for (var i = 0; i < len; i++) {
    var content = ''+'名稱:'+datastr[i].place+''+''+''+'地址:'+datastr[i].address+''+'';
    str+=content;
    };
    info.innerHTML += str;
    };

要讓按鈕按下才顯示,則在for迴圈上層加上onclick 事件,就完成了!!

var btn = document.querySelector('.btn');
btn.onclick = function(e){
for (var i = 0; i < len; i++) {...}
}

https://ithelp.ithome.com.tw/upload/images/20200411/20107321PJoFwUrm0a.png

codepen網址:https://codepen.io/yuski/pen/baEpvj


上一篇
AJAX : 基礎觀念
下一篇
AJAX : 網頁顯示資料-Jquery篇
系列文
網頁學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言