JS 筆記 - 寫一個註冊與登入的欄位

這次練習透過傳統表單的格式加上 AJAX 傳遞資料到後端，完成一個註冊與登入頁。
會使用到:

form 表單格式。

input 屬性。

AJAX 串接。

註冊與登入功能。

帳號驗證。

先在畫面寫出一個表單。

HTML 架構

<div class="wrap">
  <h2>請選擇註冊或是登入</h2>
  <form action="form.html">
    <label for="email">請輸入信箱</label>
    <input type="email" name="email" class="email" placeholder="請輸入信箱">\
    <br>
    <label for="password">請輸入密碼</label>
    <input type="password" name="password" class="password" placeholder="請輸入密碼">
    <br>
    <div id="btn">
      <input type="button" value="註冊" class="signUp">
      <input type="button" value="登入" class="logIn">
    </div>
  </form>
</div>

因為會用監聽功能，所以按鈕就不用 submit，而是使用 button，在要監聽的 input 加入 class。

JavaScript 行為

分析:
要使用的地方是輸入 input 後，透過點擊 button 後，才會產生事件，所以要綁定的是 button 的 class。( click 事件)

1 2	var signUpBtn = document.querySelector(".signUp"); var logInBtn = document.querySelector(".logIn");

綁定後，對這兩個按鈕新增 click 事件。

1 2	signUpBtn.addEventListener("click", signUpcheck, false); logInBtn.addEventListener("click", logIncheck, false);

因為兩者的功能相似，紀錄其中一個為代表，有差的地方是 API 不同，還有 API 中的 message　資訊不同。

建立 signUpcheck 監聽事件：

1
2
3

function signUpcheck() {
    consolo.log(alert('AA')); //確認有監聽成功，得到 alert 視窗，內容為 AA。
｝

因為這個監聽是要輸入帳號、密碼之後，所得到的值，所以選到 email 跟 password 的值，假設今天後端需要 JSON 格式的資料，所以就新的宣告的變數 account 為一個物件，用這個物件帶入前台輸入的資料。

前提是要看後端所需要的內容而定，並非都是 JSON 的格式，但有些後端會說給他 JSON 就好。

var emailStr = document.querySelector(".email").value;
var passwordStr = document.querySelector(".password").value;
var account = {}; //輸入的資料，填入空物件
account.email = emailStr; //填入的 email
account.password = passwordStr; //填入的密碼

串接 AJAX

資料建立好後，就可以串接 AJAX，因為是要把輸入的值丟給後端，告訴後端 xhr.setRequestHeader 的格式是 JSON，因為前後端接收的都是字串，JSON 格式是物件，所以要透過 stringify 轉成字串。完成後就可以把這個 data 送出到後端。

var xhr = new XMLHttpRequest();
xhr.open("post", "https://hexschool-tutorial.herokuapp.com/api/signup", true);
xhr.setRequestHeader("Content-type", "application/json");
var data = JSON.stringify(account); //因為格式是 JSON，所以要轉字串
xhr.send(data);

onload

再透過 onload 把想要行為寫在裡面。剛剛提到前後端所要的資料格式為字串，所以要給後端的時候，但因為要比對字串的內容，而比對的資料是 JSON ，所以回傳的資料要用 parse，並命名一個變數，代表物件回傳的 message，並做判斷，如果符合 message 中的內容，就跳出「帳號註冊成功」，其他結果則跳出「帳號已被使用」。

xhr.onload = function () {
  var callbackData = JSON.parse(xhr.responseText); //因為輸入資料目前是字串，要轉成物件才能使用
  var str = callbackData.message;
  if (str == "帳號註冊成功") {
    alert("帳號註冊成功");
  } else {
    alert("帳號已被使用");
  }
};

完整內容於 Codepen https://codepen.io/hnzxewqw/pen/NWqXrEe

心得

先分析目前所有的內容是資料(Model)、事件(event)、視覺(view)。比較可以釐清目前程式碼的邏輯與撰寫，比較知道遇到 Bug 的時候卡關在哪裡。

前後端收到的都是字串，而是在比對的資料為 JSON，所以這邊的資料轉型觀念就很重要，不過現在有很多套件可以使用，但觀念具備很重要！