JS 30天筆記 Day03-AJAX帳號登入傳統表單練習

AJAX帳號登入傳統表單練習

AJAX使用Get 取得資料

AJAX使用Post傳遞資料

利用Post傳遞資料後瀏覽器上網址會顯示index.html?Account&Email

網頁“問號”後面會傳遞各個參數進去

連結內容會使用“&”符號連結每個參數資料

利用URL:https://hexschool-tutorial.herokuapp.com/api/signin進行註冊

伺服器將回傳send帳號是否註冊成功,若能成功將回傳resposeTextㄉㄜ帳號註冊成功訊息

{
"success": true,
"result": {},
"message": "帳號註冊成功"
}

若失敗會回傳,帳號已被使用

{
"success": false,
"result": {},
"message": "此帳號已被使用"
}

並可用if else顯示alert 成功登入訊息。

var xhr = new XMLHttpRequest();
xhr.open(‘post’,’https://hexschool-tutorial.herokuapp.com/api/signin',true);
xhr.setRequestHeader(“Content-type”,”application/json”);
var data = JSON.stringify(account);
xhr.send(data);
xhr.onload = function (){
var callback = JSON.parse(xhr.responseText);
var veriSTr = callback.message;
if (veriSTr === “登入成功”){alert(“登入成功”);} else{ alert(“此帳號不存在或帳號密碼錯誤”);} } }

https://codepen.io/hank-huang/pen/KKwOowR