LINE Chatbot 建立遊戲化體驗APP｜Day5建立徽章積分制度

前一章節我們從積分去判斷出使用者的積分，以及他應得的徽章，這章我們要將它實現在LIFF的頁面上。

LIFF提供使用者登入後能夠提交他的userID給後台，我們根據userID判斷哪些徽章應該亮起來

1.首先我們利用LIFF的sdk，用js取得userID

var liffID = 'XXXXXXXXXXXX';

liff.init({
  liffId: liffID
}).then(function() {
  console.log('LIFF init');
  
  // 這邊開始寫使用其他功能
  
}).catch(function(error) {
  console.log(error);
});

2.得到userID後，使用js回傳值給python函式，python回傳值給html，判斷應該生成哪些徽章，這邊使用的是Axios。Axios 是一個輕量的 AJAX 套件，本質上亦是將 XHR 方法做封裝，並使用 Promise 方法，對一個單純用來做 AJAX 的套件幾乎可以說是沒有什麼缺點。

首先引入Axios的CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

然後寫入js

axios.post('/update_ajax',
// 方法改為 POST
{ 
        'sCustId': 'cid', 
        'sActivityId': 'activitVal'
        },
  // 送出的資料
  { headers: { 'Content-Type': 'application/json' } }
  // 各項設定
).then(res => $("div#random_decimal").replaceWith(res.data))
  // 成功則執行此函式
  .catch(err => console.log(err));
  // 失敗則執行此函式

簡單講解一下

axios.post是引用axios做ajax的動作，選擇的是post的HTTP Method
{‘sCustId’: ‘cid’,’sActivityId’: ‘activitVal’} 是傳入的data，這邊用json的方式
{ headers: { ‘Content-Type’: ‘application/json’ } } 送出資料的設定
.then(res => //執行的函式 ) 如果POST成功，就執行這個函式，一般會放console.log(res)
$(“div#random_decimal”).replaceWith(res.data) 使用jquery的replaceWith（取代）方式，將網站的內容做替換
.catch(err => console.log(err)); 如果POST失敗，就執行這個函式

參考資料：let’s write LIFF最詳盡的介紹

從js用ajax傳送post，回應到html

JavaScript – 常見的 AJAX 實現方式

AXIOS DOCS

Alvin's Blog