iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 29
1

前言

今日針對 AJAX 的 post 進行說明

發送資料至遠端

  • 資料發送流程:

    • var xhr = new XMLHttpRequest();
    • xhr.open('post','test.json',true);
    • xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    • xhr.send('資料');
  • new XMLHttpRequest():用來建立 AJAX 請求

  • xhr.open('格式','網址',BooLean):這次格式使用 post

  • xhr.setRequestHeader(header, value);:設定內容的類型

    • header:屬性的名稱
    • value:屬性的值
    • 發送表單類型的資料:('Content-Type','application/x-www-form-urlencoded')
    • 發送 JSON 類型的資料:('Content-Type','application/json')
  • xhr.send('資訊'):填入要傳送的值

    • 如果為表單類型,可能是 name=abcd&password=1234 ,2組屬性以 & 連接
    • 如果為 JSON 類型,要先將資料轉成文字再傳送,如 JSON.stringify(data)
  • 參考:

實作

表單類型

var xhr = new XMLHttpRequest();

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

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 格式為 表單
xhr.send('email=abc@gmail.com&password=1234');
// 傳送資料

// 開啟 console 輸入 xhr 或 xhr.response 確認訊息

// 第一次執行(新增)會出現
// response: "{"success":true,"result":{},"message":"帳號註冊成功"}"

// 第二次執行(重複)會出現
// response: "{"success":false,"result":{},"message":"此帳號已被使用"}"

JSON 類型

var account = {
	email: 'abcd@gmail.com',
	password:'1234'
}
// JSON 的資料
var xhr = new XMLHttpRequest();

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

xhr.setRequestHeader('Content-type','application/json');
// 格式為 JSON
var data = JSON.stringify(account);
// 將 JSON 轉為 文字
xhr.send(data);
// 傳送文字資料

使用 Network 確認


次回

最後一天了!做個總結


上一篇
Day28 - AJAX(02)
下一篇
Day30 - 結語
系列文
JavaScript 新手筆記31

尚未有邦友留言

立即登入留言