用 jQuery 發 AJAX

筆記一下，不然有點雜。

簡述

這裡會拿這隻 API 來示範。

主要是有些參數容易搞混，這邊先說明清楚：

• dataType 預期 server 要回傳的資料格式，沒指定的話就看 server 怎麼設定。
• contentType 要傳給 server 的資料格式，沒指定的話會是 application/x-www-form-urlencoded; charset=UTF-8

傳送原生表單資料（application/x-www-form-urlencoded）

HTML：

<form method="POST" action="https://gorest.co.in/public/v2/users">
  <div><input name="name" type="text" /></div>
  <div><input name="gender" type="text" /></div>
  <div><input name="email" type="email" /></div>
  <input name="status" value="active" type="hidden" />
  <input type="submit" value="送出" />
</form>

jQuery：

// 取得表單元素
const form = $('form')
// 設定監聽器
form.bind('submit', (e) => {
  // 停止預設行為
  e.preventDefault()
  // 發出 request
  $.ajax({
    url: 'https://gorest.co.in/public/v2/users',
    type: 'POST',
    headers: {
      Authorization: 'Bearer xxxx'
    },
    // 預期回傳的資料格式
    dataType: 'json',
    // 要傳過去的資料格式
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    // serialize() 取得表單的欄位值
    data: $('form').serialize(),
    success: (response) => console.log(response)
  })
})

serialize() 是 jQuery 提供的方法，用來把表單資料轉成這樣的 url 的字串格式：name=xxx&gender=xxx&。

它會根據 selector 決定是「整個表單」還是「單一元素」，詳細可參考官方說明

用 FormData 物件發 POST

FormData 因為是用物件來包資料，所以要特別設定兩個東西：

• processData: false 不要去動資料
• contentType: false 不要設定 contentType

HTML：

<form method="POST" action="https://gorest.co.in/public/v2/users">
  <div><input name="name" type="text" /></div>
  <div><input name="gender" type="text" /></div>
  <div><input name="email" type="email" /></div>
  <input name="status" value="active" type="hidden" />
  <input type="submit" value="送出" />
</form>

jQuery：

const form = $('form')
// 設定監聽器
form.bind('submit', (e) => {
  // 阻止預設行為
  e.preventDefault()
  // 用 FormData 設定表單內容
  const formData = new FormData(e.target)
  // 送出 request
  $.ajax({
    url: 'https://gorest.co.in/public/v2/users',
    type: 'POST',
    headers: {
      Authorization: 'Bearer xxx'
    },
    dataType: 'json',
    // 要傳過去的資料
    data: formData,
    // 這邊一定要設定，不然會：
    // Uncaught TypeError: Illegal invocation
    processData: false,
    contentType: false,
    success: (response) => console.log(response)
  })
})

傳送 JSON 格式的資料

HTML：

<button class="btn">送出</button>

jQuery：

// 要傳送的資料
const data = {
  name: 'ppasp',
  gender: 'male',
  email: 'qwqqekeop@gmail.com',
  status: 'active'
}

$('.btn').bind('click', () => {
  $.ajax({
    url: 'https://gorest.co.in/public/v2/users',
    type: 'POST',
    headers: {
      Authorization: 'Bearer fec7e32332c2367cc51b5669e8397e54f171439891820bfa3bfe420cf6a5c996'
    },
    dataType: 'json',
    // 要記得 stringify
    data: JSON.stringify(data),
    contentType: 'application/json; charset=utf-8',
    success: (response) => console.log(response)
  })
})

直接傳送 JavaScript 物件

這種方式要把 Content-Type 設定為 application/x-www-form-urlencoded; charset=UTF-8。從 payload 結果推測是因為直接傳 Object 的話瀏覽器會自動轉成表單的格式：name=xxx&gender=xxx&，所以才要特別設置。

HTML：

<button class="btn">送出</button>

jQuery：

const data = {
  name: 'ppasweqeasp',
  gender: 'male',
  email: 'qwqasdqqekeop@gmail.com',
  status: 'active'
}

$('.btn').bind('click', () => {
  $.ajax({
    url: 'https://gorest.co.in/public/v2/users',
    type: 'POST',
    headers: {
      Authorization: 'Bearer fec7e32332c2367cc51b5669e8397e54f171439891820bfa3bfe420cf6a5c996'
    },
    dataType: 'json',
    // 不做 stringify
    data: data,
    // 不是 application/json; charset=utf-8
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    success: (response) => console.log(response)
  })
})