AJAX 與表單運用(註冊)

這個筆記要來練習post的運用。
前面我們多用xhr.open('get','url',true)的方式。

傳統表單

首先，我們先來回顧一般傳統表單的傳送方式。

<form action='index.html'> //action是表單處理程式的URL，傳送的網址。
    <p>帳號:
    <input type="text" name="account"></p>
    <p>密碼:
    <input type="password" name="password"></p>
    <input type="submit" value="送出">
</form>

圖片是一個常見的表單，按下送出會將資料給後端。
按下送出後，我們可以觀察一下網址的變化!
https://...index.html?account=1234%40gmail.com&password=123
解析這段網址: ?後面就是參數，多個欄位(資料)，會利用&連結。

AJAX POST 寫法

在網頁上註冊時，前後端的配合通常是這樣:

Method: post
URL: 表單處理程式的URL，傳送的網址

Data: 傳送的資料(這是一個範例格式)

      email: '123@mail.com',
      password: '123'
  }

後端的回傳 Response:
1. Success Response: (如果沒有重複的帳號)
```
{
 "success": true,
 "result": {},
 "message": "註冊成功"
}
```
2. Error Response:
```
{
 "success": false,
 "result": {},
 "message": "帳號已被使用"
}
```
## 正確的回傳
xhr.setRequestHeader() - 告知資料庫，我們要傳送資料過去。

再來使用xhr.send(內容)傳送資料

點開查看，就可以看到成功回傳。