AJAX 與 表單運用(註冊)


Posted by hoyi-23 on 2021-05-23

這個筆記要來練習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:

    1. Success Response: (如果沒有重複的帳號)
      {
       "success": true,
       "result": {},
       "message": "註冊成功"
      }
      
    2. Error Response:
      {
       "success": false,
       "result": {},
       "message": "帳號已被使用"
      }
      

    ## 正確的回傳
    xhr.setRequestHeader() - 告知資料庫,我們要傳送資料過去。

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

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


錯誤的回傳

帳號已經使用過了



#ajax #post







Related Posts

人性較量Day07~共存共榮

人性較量Day07~共存共榮

Google Cloud Source Repositories 使用紀錄

Google Cloud Source Repositories 使用紀錄

JS 字串拼接 Template Literals

JS 字串拼接 Template Literals


Comments