AJAX post 寫法

傳統表單輸入

輸入完按下送出之後，會發現網址上多了

「?account=abcd&password=1234」

這段字串，是用來傳送資料給後端的字串。

1. 建立一個新的 XMLHttpRequest 物件，用來 撈取/傳遞資料

var xhr = new XMLHttpRequest();

2. 開啟(要執行的動作, 遠端的網址, 非同步)

xhr.open(‘post’,’https://hexschool-tutorial.herokuapp.com/api/signup', true);

3. 設定 要傳送資料的 格式

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

4. 傳送資料 給後端（資料有兩筆以上的話，用「&」做區隔）

xhr.send(‘email=7410@gmail.com&password=741000’);

第一次傳送，帳號註冊成功！

再次傳送時，會發現帳號已被使用。

從 chrome 開發人員工具檢視 AJAX post

get （讀取資料）

post（傳送資料，需設定 setRequestHeader）

setRequestHeader（設定傳送資料的格式）

1. 一般傳統輸入表單
xhr.setRequestHeader(‘Content-type’,’application/x-www-form-urlencoded’);
2. json
xhr.setRequestHeader(‘Content-type’,’application/json’);

傳送的格式，端看後端工程師（PHP、node.js）怎樣 post 傳送資料，前端工程師再配合去撰寫格式。

使用 JSON post 資料

1. 建立新的 XMLHttpRequest 物件
2. 開啟 post 網址 非同步
3. 設定 傳送資料的格式
4. 將資料 從 JSON 格式轉成 字串
5. 轉型後的資料 傳送給遠端伺服器

查看 xhr 詳細資料

從 Network 可以發現 POST 的資料，Type 為 xhr。

點擊進去，可以查看各種詳細資料，以及遠端回傳的資料。