AJAX POST API 講解

六角js班的筆記

https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Methods

Get和Post的不同：
Post：瀏覽器會傳送資料給伺服器，讓server回傳資料正確or錯誤or其他狀態。
Get：get只用於取得資料。

Post網路請求格式介紹：
Method ：代表HTTP請求方法
URL：向哪一個網址發送請求
Data：資料的格式/(屬性)
***發送請求時，需要依照指定的格式傳送，才能要到資料

四種常見的 POST 請求 content-type (request的資料內容的格式)介紹：
request header Content-Type
1.application/x-www-form-urlencoded→提交表單的那種格式
2.application/json→json格式
3.multiple/form-data→需要的是檔案(例如pdf、mp4)的資料格式
4.text/plain→單純文字，較少使用
**前端工程師向後端工程師要資料時，需要問清楚content-type

透過axio套件，實做網路請求，本小節練習用 API 網址

// axios API
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
// 放要post的資料結構
  .then(function (response) {
    console.log(response);
  })
//如果成功，就跑then
  .catch(function (error) {
    console.log(error);
  });
//如果失敗，就跑catch

// AJAX POST API 講解：透過axios實作 註冊POST 網路請求
// 可以從Chrome dev tool 的 Network裡面觀察到
// axios這個套件，需額外載入JS
// axios
// Using jsDeliver CDN(下載站點)
let obj ={
    email: 'gg@gmail.com',
    password: '12345678'
}

axios.post('https://hexschool-tutorial.herokuapp.com/api/signup', obj)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });