JS 筆記 - 將本地端 JSON 用 AJAX 傳給後端

透過 get 取得 AJAX 資料後，一定也會有資料要傳給後端，可以使用 post。

假如目前有一個會員資料物件:

var account = {
  email: 'name123@email.com',
  password: '123xxxx'
}

方法跟取得 AJAX 很像，程式碼如下:

var xhr = new XMLHttpRequest();
xhr.open("post", "https://hexschool-tutorial.herokuapp.com/api/signin", true); //post 告知後端
xhr.setRequestHeader("Content-type", "application/json"); //告訴後端是用 JSON 格式
var data = JSON.stringify(account); //將物件資料轉成字串
xhr.send(data); //送出字串

在 console 中輸入 xhr 會看到收到資料的狀態:

XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
onreadystatechange: null
readyState: 4 //以完全接收到數據資料
timeout: 0
withCredentials: false
upload: XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …}
responseURL: "https://hexschool-tutorial.herokuapp.com/api/signin"
status: 200 //正確，有收到資料。
statusText: "OK"
responseType: ""
response: "{"success":false,"result":{},"message":"此帳號不存在或帳號密碼錯誤"}"
responseText: "{"success":false,"result":{},"message":"此帳號不存在或帳號密碼錯誤"}"
responseXML: null
onloadstart: null
onprogress: null
onabort: null
onerror: null
onload: null
ontimeout: null
onloadend: null
__proto__: XMLHttpRequest