這個筆記要來練習post的運用。
前面我們多用xhr.open('get','url',true)的方式。
實作註冊表單 -- CodePen AJAX表單
傳統表單
首先,我們先來回顧一般傳統表單的傳送方式。
<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:
- Success Response: (如果沒有重複的帳號)
{ "success": true, "result": {}, "message": "註冊成功" }
- Error Response:
{ "success": false, "result": {}, "message": "帳號已被使用" }
## 正確的回傳
xhr.setRequestHeader() - 告知資料庫,我們要傳送資料過去。
再來使用xhr.send(內容)傳送資料
點開查看,就可以看到成功回傳。
- Success Response: (如果沒有重複的帳號)
錯誤的回傳
帳號已經使用過了