竹白的 JS 學徒特訓班筆記 - 目錄
記錄六角學院所開的 JS 學徒特訓班，為期 60天的特訓。
第四十七關 -
題目連結
47. 問題
請吸收以下影片列表，以了解 post 的練習，影片內容是使用原生 post 方式，如果您已理解觀念，還請觀看 axios 影片來改寫原生 post 語法，用我們所提供的 API，來註冊一個帳號
老鳥問題：
請用此 API，寫三個 AJAX POST API 範例：
- XMLHttpRequest
- Fetch
- axios
47. 參考解答
API、要 POST 的資料（JSON 格式）：
1
2
3
4
5
|
const url = 'https://hexschool-tutorial.herokuapp.com/api/signin';
const sendData = {
email: 'lovef2e@hexschool.com',
password: '12345678',
};
|
XHR：
1
2
3
4
5
6
7
8
9
10
11
|
const xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.setRequestHeader('content-type', 'application/json');
xhr.send(JSON.stringify(sendData));
xhr.addEventListener('load', function () {
if (this.status === 200) {
const data = JSON.parse(this.responseText);
alert(data.success + ',' + data.message);
}
});
|
Fetch：
1
2
3
4
5
6
7
8
9
|
fetch(url, {
method: 'POST',
headers: { 'content-type': 'application/json' },
body: JSON.stringify(sendData),
})
.then((response) => response.json())
.then((data) => {
alert(data.success + ',' + data.message);
});
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// Async/Await
async function ajax() {
const response = await fetch(url, {
method: 'POST',
headers: { 'content-type': 'application/json' },
body: JSON.stringify(sendData),
});
const data = await response.json();
alert(data.success + ',' + data.message);
}
ajax();
|
jQuery ajax：
1
2
3
|
$.post(url, sendData, function (data) {
alert(data.success + ',' + data.message);
});
|
axios：
1
2
3
4
|
axios.post(url, sendData).then((response) => {
const data = response.data;
alert(data.success + ',' + data.message);
});
|
教學、延伸知識連結
第四十八關 -
題目連結
48. 問題
請做此此影片的小節作業，一個網頁上有兩個面板，分別是
同時寫一些驗證與使用者體驗功能，例如：
- 帳號密碼不可為空
- 送出後，欄位進行清空
- 查詢是否為 Email 格式(非必做)
- 密碼是否有英數夾雜(非必做)
48. 參考解答
codePen
第四十九、五十關 - 旅館訂房網
題目連結
技術主管終於告訴小杰，他們準備要幫客戶做旅館訂房網的題目，客戶已經有在網站看到一些網站覺得不錯，
後來技術主管發現，其實那些網站都是 fake API，查到源頭才發現是這個網站，所以客戶要求說，先用這網站所提供的 API 先做出雛形來。
49.50. 問題
小杰依照文件裡的 API，想要去取得此 API [GET] 取得所有房型，但發現不管怎麼戳也無法取得所有房型資料，
技術主管只淡淡說了一句：「你送請求時少加 TOKEN 啦！」，就跑去泡咖啡了，這句話究竟是什麼意思呢？
- 任務一：請已經了解這知識的學員，寫篇 hackMD，教導該如何夾帶 token，
- 任務二：請用 codepen 寫自己的範例，能正確取得 [GET] 取得所有房型，並用 ul、li 來呈現各個「房型名稱」
49. 參考解答
TOKEN 簡單來說，就是你登入帳密（POST）後，伺服器會給你通行證（token），當你要跟伺服器請求資料時（GET），就是用這組通行證來驗證，不需要再次傳送帳號。
API、TOKEN：
1
2
|
const url = 'https://challenge.thef2e.com/api/thef2e2019/stage6/rooms';
const token = '';
|
XHR：
1
2
3
4
5
6
7
8
9
10
11
|
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.setRequestHeader('Authorization', `Bearer ${token}`);
xhr.send(null);
xhr.addEventListener('load', function () {
if (this.status === 200) {
const data = JSON.parse(this.responseText);
console.log(data);
}
});
|
Fetch：
1
2
3
4
5
6
7
8
9
10
|
fetch(url, {
method: 'GET',
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => res.json())
.then((data) => {
console.log(data);
});
|
jQuery ajax：
1
2
3
4
5
6
7
8
9
10
|
$.ajax({
url,
type: 'GET',
headers: {
Authorization: `Bearer ${token}`,
},
success(data) {
console.log(data);
},
});
|
axios：
1
2
3
4
5
6
7
|
axios
.get(url, {
headers: { Authorization: `Bearer ${token}` },
})
.then((res) => {
console.log(res.data);
});
|
50. 參考解答
渲染：
1
2
3
4
5
6
7
8
9
|
function render(data) {
const list = document.querySelector('.list');
data.items.forEach((item)=> {
const li = document.createElement('li');
list.append(li);
li.textContent = `Room name: ${item.name}`;
});
}
|
教學、延伸知識連結
