2024-09-01 JavaScript 系列五：第7課 ── 學會 AJAX 與 data attribute 的結合

發表於 更新於 分類於 閱讀次數：
2024-09-01 JavaScript 系列五：第7課 ── 學會 AJAX 與 data attribute 的結合

JavaScript 系列五：第7課 ── 學會 AJAX 與 data attribute 的結合
課程目標
學會結合 AJAX 與 data attribute 來製作應用程式

課程內容
打造應用程式的時候，有些資料不會直接顯示在畫面上，但之後的其他動作會用到

這時可以把資料存在 data attribute 裡面

1
2
3
4
5
6
7
8
9
<div data-email="don't know yet" data-phone="0987654321">
  <span></span>
  <button onclick="showEmail()">show email</button>
  <button onclick="showPhone()">show phone</button>
</div>

<hr>

<button onclick="load()">Load User</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function showEmail()
{
    alert(document.querySelector('div').dataset.email)
}

function showPhone()
{
    alert(document.querySelector('div').dataset.phone)
}

function load()
{
  fetch('https://fakestoreapi.com/users/1')
    .then(res => res.json())
    .then(json => {
      const element = document.querySelector('div');
      element.querySelector('span').textContent = json.username;
      element.dataset.email = json.email;
      element.dataset.phone = json.phone;
    })
}

到 jsfiddle 跑跑看，按鈕到處點點看，就知道 data attribute 的用法了

非常簡單，寫 html 的時候，直接設定 data-* 屬性就是了

寫 js 的時候，直接存取 DOM 元素的 dataset 屬性就是了

如果 AJAX 撈到了大量資料，但畫面上只需先顯示一部分資料

那麼就可以用 data attribute 先把資料整理起來放著

之後要擴充這個應用程式，或者有同事接手維護，要拿資料時，就很方便，也可以避免一直重複發 AJAX 拿同樣的資料

課後作業
接續上一課的作業，這次要改得更漂亮

點擊 Details 按鈕，本來是連續跳出三個 alert

實務上不可能用連續跳出 alert 來說明商品細節，太醜了

這次要拿掉 alert，改成跳出一個 modal 互動視窗元件，

你可以使用之前課程中，自己製作過的 modal 元件

也可以上網找套件，找一款現成的使用

這個 modal 視窗要包含以下資訊

名稱
分類
描述
圖片
價格
請使用 data attribute 將資料存放在 <li> 元素

點擊 Details 按鈕時，再將這些資料撈出來，放進 modal 元件內

做出以上功能，你就完成這次的課程目標了！

文章取自: https://codelove.tw/@howtomakeaturn/post/X3KXRa
by 站長阿川