Coding101 Day2 使用AJAX JSON 傳遞表單

Coding 101 Day2 之使用AJAX JSON 傳遞表單筆記

學習如何透過API傳送json格式表單

在index.html裡先新增表單所需的input標籤，在js裡再建立按鈕的監事件，及 xhr的相關指令

帳號：<input type="text" class="account">
密碼：<input type="password" class="password">
<input type="button" value="送出" class="submit">

var submit = document.querySelector('.submit');

submit.addEventListener('click', signup); //監聽按鈕事件

function signup() {
  var emailStr = document.querySelector('.account');
  var passwordStr = document.querySelector('.password');
  var account = {}; // 建立JSON Object
  account.email = emailStr;
  account.password = passwordStr;

  var xhr = new XMLHttpRequest();
  xhr.open('post','https://xxxxxxx-tutorial.herokuapp.com/api/signup',true);
  xhr.setRequestHeader('Content-type','application/json');
  var data = JSON.stringify(account); // 將JSON轉為字串格式
  xhr.send(data);
  xhr.onload = function() {
    // 取得 xhr的回應後，顯示註冊是否成功資訊
    var callbackData = JSON.parse(xhr.responseText);
    console.log(callbackData);
    var veriStr = "帳號註冊成功";

    if(veriStr == "帳號註冊成功") {
      alert('帳號註冊成功');
    } else {
      alert('帳號註冊失敗');
    }
  }
}