[JS 60 Days] Day 47 to Day 60 - AJAX Post和Get

Introduction

• Day 47 - AJAX POST
• Day 48 - AJAX POST 小練習
• Day 49 - 旅館訂房網
• Day 50 - 旅館訂房網
• Day 51 - 頁面傳遞
• Day 52 - 頁面傳遞
• Day 53 - 頁面傳遞
• Day 54 - POST API
• Day 55 - 簡單預約列表
• Day 56 - 訂房網該做的功能
• Day 57 - 訂房網該做的功能
• Day 58 - 訂房網該做的功能
• Day 59 - 提交作品
• Day 60 - 提交作品

---

Day47

AJAX POST

Day48

AJAX POST 小練習

• 請用此 API，寫三個 AJAX POST API 範例，個別是
  • xmlhttprequest
  • Fetch
  • axios

畫面上有：

註冊面板
登入面板

同時寫一些驗證與使用者體驗功能，例如：

帳號密碼不可為空
送出後，欄位進行清空
查詢是否為 Email 格式(非必做)
密碼是否有英數夾雜(非必做)

• 我的DEMO

驗證的部分，製作了不可留空驗證、email格式驗證、密碼格式驗證（長度在 6-12 之間，必須包含至少一個大和小寫英文字、一個數字）、再次輸入密碼驗證。
DEMO

三種post寫法

let url = `https://hexschool-tutorial.herokuapp.com/api/${type}`;
let user = {
    email: document.querySelector(`#email_${type}`).value,
    password: document.querySelector(`#password_${type}`).value,
};

const axiosPost = function () {
    axios
      .post(url, user)
      .then(res => {
        console.log(res);
        swal({
          title: res.data.message,
        });
        reset(type);
      })
      .catch(err => {
        console.log(err);
        swal({
          title: err,
        });
      });
  };

  // xhr 寫法
  const xhrPost = function () {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', url);
    xhr.setRequestHeader('Content-type', 'application/json');
    xhr.send(JSON.stringify(user));
    xhr.onload = function () {
      const res = JSON.parse(xhr.response);
      swal({
        title: res.message,
      });
      reset(type);
    };
  };

  // fetch 寫法

  const fetchPost = function () {
    fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(user),
      })
      .then(response => response.json())
      .then(data => {
        swal({
          title: data.message,
        });
        reset(type);
      })
      .catch(err => console.log(err));
  };

Day49

旅館訂房網

Day50

旅館訂房網

問題

小杰依照文件裡的 API，想要去取得此 API [GET] 取得所有房型，但發現不管怎麼戳也無法取得所有房型資料，技術主管只淡淡說了一句：「你送請求時少加 TOKEN 啦！」，就跑去泡咖啡了，這句話究竟是什麼意思呢？ 主要就是需要帶入Token來驗證

請用 codepen 寫自己的範例，能正確取得 [GET] 取得所有房型，並用 ul、li 來呈現各個「房型名稱」

Day51

頁面傳遞

Day52

頁面傳遞

Day53

頁面傳遞

問題

• 任務一：這頁面需要使用到 GitHub Pages，並設計兩頁，一頁是 index.html 顯示所有房型，每個房型都會帶 a 連結，連結會帶參數，參數請帶每個房型的 id
• 任務二：當點擊連結進入到 room.html 後，依照取得的 id 資料，去接 [GET] 單一房型細節，並在該頁顯示該房型細節。例如有無提供各種 room service、訂房紀錄等等。

Day54

POST API

第 54 關
小杰感到非常困擾，因為接下來他要開始練習 POST API，也就是 [POST] 預約房型，但他不管怎麼傳送都是失敗，一起來幫幫小杰 POST 資料成功吧！

問題
請回傳自己 post api 成功的功能

Day55

簡單預約列表

小杰發現當他練習 POST API，也就是 [POST] 預約房型，當他預約某個房型成功時，會 response 目前訂房狀態，也同時在 [GET] 單一房型細節的 booking 屬性看到這房間預約狀態。

請設計在房型頁面可以進行表單預約，POST 預約成功後，再用 ul li 呈現已被預約的訂房資訊。

如下列表呈現

預約人：小杰、預約時段：2020/8/242020/8/25
預約人：小花、預約時段：2020/8/262020/8/27

Day56

Day57

Day58

訂房網該做的功能

首頁：

能看到所有房型，並能點擊任一房型，進入到單一房型頁面觀看更多

單一房型頁面：

1. 客戶可以觀看該房型詳細資訊，例如旅館描述、平日價格(一-四)、假日價格(五-日)、checkIn 時間、其他服務，詳細資訊欄位請參考此連結。
2. 客戶可以用預約列表或日曆方式，瀏覽未來 90 天已預約與尚未預約的時段。
3. 客戶在選擇預約日期時，會即時顯示訂房價格總價
4. 客戶可以線上訂房，需填寫的欄位：姓名、電話、預約起迄，只能預約未來 90 天內的時段
5. 若預約失敗，會回傳訊息讓客戶知曉，失敗原因項目如下
   a. 預訂 90 天後
   b.預約時間已被人預訂
   c.您預約的是過去時間，例如昨天

Day60

提交作品