[JavaScript] - AJAX：註冊與登入驗證

project
ajax, javascript

AJAX side project

這個是網路課程中學習的 side project，有註冊跟登入表單輸入。

這邊有後來參考github資源，用exprees建立此功能的資料庫來實現。
文章連結：Express-註冊與登入驗證

概略流程：

  1. addEventListener監聽
  2. function中用來取到輸入的帳號密碼的value，並將取得的帳號密碼的值塞回object中。
  3. var xhr = new XMLHttpRequest()
  4. xhr.open()
  5. xhr.setRequestHeader()
  6. xhr.send() - 內容要轉為字串
  7. 用xhr.onload function (){} / 確保資料都跑完再執行function
  8. 因為要判斷資料後再去執行所需的alert,在獲取資料前要先將json內格式從字串轉為陣列
  9. 再利用物件中的”message”來判斷執行哪種alert

註冊表單

  • 註冊成功

  • 已被使用得帳號

登入表單

  • 登入成功

  • 不存在或帳號已被使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<h3>註冊</h3>
帳號：
<input type="text" name="account" class="account" />
<br />
密碼：
<input type="password" name="password" class="password" />
<br />
<input type="submit" value="Register" class="send" />

<h3>登入</h3>
帳號：
<input type="text" name="account" class="accountLogin" />
<br />
密碼：
<input type="password" name="password" class="passwordLogin" />
<br />
<input type="submit" value="SignIn" class="signIn" />

在下面 js 中，從伺服器中比對送出的資料後，判斷格式中的 message 內容作出下一步的行為。

JSON 格式
註冊：

Data:
{
    email: 'lovef2e@test.com',
    password: '12345678'
}
Success Response:
{
    "success": true,
    "result": {},
    "message": "帳號註冊成功"
}
Error Response:
{
    "success": false,
    "result": {},
    "message": "此帳號已被使用"
}

登入：

Data:
{
    email: 'lovef2e@test.com',
    password: '12345678'
}
Success Response:
{
    "success": true,
    "result": {},
    "message": "登入成功"
}
Error Response:
{
    "success": false,
    "result": {},
    "message": "此帳號不存在或帳號密碼錯誤"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// ----AJAX sample registration----
var send = document.querySelector(".send");
send.addEventListener("click", signup, false);

function signup() {
  var emailStr = document.querySelector(".account").value;
  var passwordStr = document.querySelector(".password").value;
  //把要送到伺服器的data設成物件，並將輸入的值帶進去
  var account = {};
  account.email = emailStr;
  account.password = passwordStr;

  var xhr = new XMLHttpRequest();
  xhr.open("post", "註冊url", 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 verifyStr = callBackData.message;
    if (verifyStr == "帳號註冊成功") {
      alert("帳號註冊成功!!");
    } else if (verifyStr == "此帳號已被使用") {
      alert("此帳號已被使用!!\n請更換帳號名稱並重新註冊");
    } else {
      alert("帳號註冊失敗!!");
    }
  };
}

// ----AJAX sample login----
var signIn = document.querySelector(".signIn");
signIn.addEventListener("click", signin, false);

function signin() {
  var emailStr = document.querySelector(".accountLogin").value;
  var passwordStr = document.querySelector(".passwordLogin").value;
  //把要送到伺服器的data設成物件，並將輸入的值帶進去
  var account = {};
  account.email = emailStr;
  account.password = passwordStr;

  var xhr = new XMLHttpRequest();
  xhr.open("post", "登入url", 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 verifyStr = callBackData.message;
    if (verifyStr == "登入成功") {
      alert("帳號登入成功!!");
    } else {
      alert("此帳號不存或帳號密碼錯誤!!");
    }
  };
}