提姆寫程式

0%

JS 筆記 - 傳統 form 表格與 AJAX POST 寫法

發表於 分類於 Disqus：
寫一個有驗證功能的註冊表單

ajax

在許多電商網頁上，會有會員登入的頁面，那會遇到一個情形，就是在輸入資料時，會有驗證功能，若有重複的 email 就會告知「帳號重複使用」，並會給予建議的帳號名稱，這怎麼做到的呢?

傳統表單資料的傳送方式

以下是一個傳統表單的範例：

1
2
3
4
5
6
7
<form action="form.html">
  帳號:
  <input type="text" name="account"><br>
  密碼:
  <input type="password" name="password"> <br>
  <input type="button" value="送出">
</form>

並且輸入帳號密碼後，會在原網址後面出現這串程式碼，

1
form.html?account=name%40email.com&password=12345

要在本地端測試時才會出現。

意思是:

  1. ? 是用來連結前面的網址。
  2. 所輸入的帳號密碼也會在其中，並且有多項資訊會用 & 符號連接。

AJAX POST API

複習一下 AJAX 起手式:

1
2
3
4
xhr = new XMLHttpRequest();
xhr.open("get", API網址, true);
xhr.send(null);
xhr.onload = function () {};

串接 API

本次練習 API (六角學院提供。

但這次是要把註冊的資料送到後端做驗證，所以 get 要改成 post

1
xhr.open("post", "https://hexschool-tutorial.herokuapp.com/api/signup", true);

這時再用開發人員工具輸入 xhr 會得到 readyState:1，代表有抓到資料。

傳統表單獲取資料 setRequestHeader

並且要用一個 setRequestHeader 格式，記錄好輸入的資料，告訴後端我要傳送這個資料，程式碼為:

1
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

來了解一下英文的意思，來幫助記憶(以下為自行翻譯的記憶方式):

  1. setRequestHeader: set 有設定的意思，Request 是請求，Header 為抬頭，所以是要設定一個請求抬頭給後端準備要資料。
  2. 前面的參數: Content-type，字面意思就是內容類型。
  3. 後面的參數:應用程式中網址的編碼。
  • application: 應用程式。
  • url: 網址。
  • encoded: 編碼的。

這樣就比較不會忘記。

之前因為只是 get 資料，所以參數是 null，如今要把註冊的資訊傳給後端，後端的資料有兩種內容，所以要把剛剛在 form 資料加入到參數中。先來看一下後端資料格式:

1
2
3
4
5
Data:
{
  email: 'lovef2e@hexschool.com',
  password: '12345678'
}

所以就是要傳這樣的格式內容資料給後端。

send

所以要給 email 跟 password，所以 send 的參數內容就要寫入剛剛填入的資料:

1
xhr.send("email=name@email.com&password=12345");

如此就可以完成註冊的資料了。

完整程式碼:

1
2
3
4
var xhr = new XMLHttpRequest();
xhr.open("post", "https://hexschool-tutorial.herokuapp.com/api/signup", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("email=name@email.com&password=12345"); //send 裡面要用組字串

傳送資料後，就可以在用 xhr.onload=function(){...} 去寫想要達到的效果了。