六角體驗營
# JS: AJAX-POST API講解
> HTTP 請求方法: [**mdn web docs**](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Methods)
## 網路請求種類介紹（request methods）
### GET
方法請求展示指定資源。使用 GET 的請求只應用於取得資料。
### POST
* POST 方法用於提交指定資源的實體，通常會改變伺服器的狀態或副作用（side effect）。
* **POST 與 GET 差別** : POST 會在瀏覽器向伺服器送出請求時，可以送資料給伺服器，由伺服器驗證資料是否正確，正確後回傳對應response.data數據

* 四種常見的 POST 請求 **content-type** 介紹
* 向伺服器時請求資料格式 request header Content-Type
1. **application/x-www-form-urlencoded** (字符格式ex.username=johndoe&password=secretpassword)
2. **application/json** (axios 方法預設json格式)
3. **mutipart/form-data** (檔案格式: 圖片/PDF/MP4/word...)
4. **text/plain** (記事本格式)

## post 網路請求文件介紹
### 註冊&登入:
> [個人筆記: CH15 JS：AJAX(基本概念2) 1-2](https://hackmd.io/iMaczVEhSBKe96pVtBJfqA?view)
> [練習資源](https://github.com/hexschool/nodejs_ajax_tutorial)
#### 透過 axios 實做註冊 post 網路請求

let obj = {
  email:'[e-mail]',
  password:"12345678"
}

axios.post('https://hex-escape-room.herokuapp.com/api/user/signup',obj) 
                                                                 //網址後資料obj為要傳送過去的資料
  .then(function(response){
    console.log(response);
  })
  .catch(function(error){
    console.log(error);
  })

## 從 chrome 觀察 post 請求
* DevTools 中 Network 可觀察數據傳遞 : **Header, Payload, Response**
* Perflighr 可觀察是否有跨網域

* Header : 會有資料格式資訊

* Payload : 將資訊以application/json格式傳遞

* Response : 回傳數據

<br>
<hr>

## 課堂範例 : 實作axios DOM表單註冊流程

#### html介面 (記得引入axios CDN)

<div class="signUp">
    <h1 class="title">註冊</h1>
    帳號:
    <input type="email" class="account">
    <br>
    密碼:
    <input type="password" class="password">
    <br>
    <input type="button" value="送出" class="send"> 
</div>

<div class="logIn">
    <h1 class="title">登入</h1>
    帳號:
    <input type="email" class="account2">
    <br>
    密碼:
    <input type="password" class="password2">
    <br>
    <input type="button" value="送出" class="send2"> 
</div>

#### JS axios 註冊 / 登入 實作範例
>[六角API資源](https://github.com/hexschool/nodejs_ajax_tutorial)
1. 註冊

//先抓取DOM
const account = document.querySelector("account");
const password = document.querySelector(".password");
const send = document.querySelector(".send");

//按鈕監聽事件
send.addEventListener("click",function(e){
  callSignUp();
})

//執行AJAX-----------------------------------
function  callSignUp(){
    
//資料格式: 
//{email:'[e-mail]',password:"12345678"}
  //寫判斷確保資料格式正確
  if(account.value=""||password.value=""){
      alert("請填寫正確資料");
      return; // return就不會跑func後續程式碼
  }
  let obj = {}; //先用空物件
  //要由DOM取得 被傳遞的資料
  obj.email = account.value;
  obj.password = password.value;
  //consoe.log(obj); //觀察資料是否正確
    
  axios.post('https://hex-escape-room.herokuapp.com/api/user/signup',obj)
    .then(function(response){
      //利用回傳的data判斷後介面互動
      if(response.data.message="帳號註冊成功"){
          alert("恭喜註冊成功");
      }else{
          alert("此帳號可能已註冊過");
      }
      //清除input中的字串
      account.value="";
      password.value="";
    })
    .catch(function(error){
      console.log(error);
  })
}

2. 登入

let account2 = document.querySelector(".account2");
let password2 = document.querySelector(".password2");
let send2 = document.querySelector(".send2");

send2.addEventListener("click",function(e){
    logIn();
});

function logIn(){
    let obj={};
    obj.email = account2.value;
    obj.password = password2.value;

    if(account2.value === ""|| password2.value === ""){
        alert("請輸入帳號密碼");
        return;
    }else{
       axios.post("https://hex-escape-room.herokuapp.com/api/user/signin",obj)
         .then(function(response){
            //console.log(response.data);
            if(response.data.message==="此帳號不存在或帳號密碼錯誤"){
                alert("請確認登入帳號密碼是否正確")
            }else{
                alert("登入成功");
            }
         }) 
         .catch(function(error){
            console.log(error);
        })

        account2.value="";
        password2.value="";
    }
}