透過 jQuery 使用 Ajax 與 API 進行資料互動|jQuery, Ajax|API|XMLHttpRequest|Axios|JavaScript|伊恩踩坑筆記

在上一篇稍微講解了一下 認識 jQuery 的基本使用與安裝教學,現在來簡易說明如何透過 jQuery 的 Ajax 與 API 進行資料互動。jQuery 將所謂的 XMLHttpRequest 封裝成 Ajax 並幫忙簡化了許多寫法,方便使用也快速上手,與 Axios 頗為類似

$.ajax

  • url: 你請求的 API 網址
  • type: GET | POST
  • timeout: 多久後端沒有回應時跑向 fail
  • data: 通常就直接給 json
  • done: 成功時返回(res: 從伺服器返回的資料)
  • fail: 錯誤時返回
  • contentType: 資料給後端的內容格式

根據 jQuery 官方文件說明,在 jQuery 3.0 後的 success 改為 done、error 改為 fail、complete 改為 always

通常只會用到這幾個參數,其餘基本上除非你有特殊需求,否則這樣其實就很夠用了,可以參考 jQuery Ajax 官方文件 查看更多 Method 用法

當然 Ajax 也可以塞 header

headers: {
'Authorization':'Basic xxxxxxxxxxxxx',
'X-CSRF-TOKEN':'xxxxxxxxxxxxxxxxxxxx',
'Content-Type':'application/json'
},

另外,除了 $.ajax 外,jQuery 提供更簡約的 GET | POST 方式:

$.post

$.get

詳情可以參考 jQuery API 文件

ING Design 応設計
https://www.theingdesign.com/

--

--

Ian BerLin / 伊恩踩坑筆記

專門寫一些自己曾經踩過的坑,希望你沒踩過 / Web & BackEnd Developer • 台北 • theingdesign.com • IG: @ianakaberlin