AJAX 實務練習

一般註冊帳號輸入實務練習 :

1. 建構傳統表單輸入html

<form action="index.html">
    帳號：<input type="text" name="account"> <br>
    密碼：<input type="password" name="password"> <br>
    <input type="button" class="send" value="送出">
</form>

2. 宣告 send ，指定 .send 的 button 按鈕，並監聽按鈕事件觸發 signup 函式

var send = document.querySelector('.send');
send.addEventListener('click',signup,false);
function signup(){}

3. 在 signup 函式，指定表單輸入框及設定物件及屬性

//抓取表單帳號及密碼輸入的值
var emailStr = document.querySelector('.account').value;
var passwordStr = document.querySelector('.password').value;

//空物件用來裝使用者填入帳號及密碼的值
var account = {};
account.email = emailStr;
account.password = passwordStr;

4. 宣告 xhr ，產生 XMLHttpRequest ，用JSON格式傳抓資料回來

//AJAX遠端傳值及抓值
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);
xhr.send(data);

5. 在本地端抓值回來判斷比對，有無成功註冊
   I. .onload 等載完資料後進行函示處理
   II. 宣告 callbackData ，把抓回來的 responseText 的資料給 JSON.parse 陣列化
   III. 先 console.log 測試有無抓到並成功轉換
   IV. 宣告 veriStr 指定 callbackData裡的 message 文字資料
   V. 判斷 message 文字是否等於 "帳號註冊成功" ，一樣就傳"您的帳號已經註冊成功了!"，不一樣就傳"您的帳號註冊失敗!請重新註冊!"

//本地端判斷有無註冊成功
xhr.onload =function(){
    var callbackData = JSON.parse(xhr.responseText);
    console.log(callbackData);
    var veriStr = callbackData.message;
    if(veriStr == "帳號註冊成功"){
        alert("您的帳號已經註冊成功了!")
    }else{
        alert("您的帳號註冊失敗!請重新註冊!")
    }
}

練習結果 :

註冊成功

註冊失敗

JavaScript碼

var send = document.querySelector('.send');
send.addEventListener('click',signup,false);

function signup(){
    //抓取表單帳號及密碼輸入的值
    var emailStr = document.querySelector('.account').value;
    var passwordStr = document.querySelector('.password').value;
    
    //空物件用來裝使用者填入帳號及密碼的值
    var account = {};
    account.email = emailStr;
    account.password = passwordStr;
    

    //AJAX遠端傳值及抓值
    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);
    xhr.send(data);
    

    //本地端判斷有無註冊成功
    xhr.onload =function(){
        var callbackData = JSON.parse(xhr.responseText);
        console.log(callbackData);
        var veriStr = callbackData.message;
        if(veriStr == "帳號註冊成功"){
            alert("您的帳號已經註冊成功了!")
        }else{
            alert("您的帳號註冊失敗!請重新註冊!")
        }
    }
}