iT邦幫忙

0

透過 jQuery 使用 Ajax 與 API 進行資料互動(jQuery, Ajax, API, XMLHttpRequest, Axios, JavaScript)

  • 分享至 

  • xImage
  •  

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

$.ajax({
  url: "<API URL>",
  type: "GET | POST",
  timeout: 15000,
  data: { name: 'Hello' },
  contentType: "application/json; charset=utf-8",
}).done(function (res) {
  console.log(res)
}).fail(function (err) {
  console.log(err)
})

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'
},

原文出處:
https://ianakaberlin.medium.com/%E9%80%8F%E9%81%8E-jquery-%E4%BD%BF%E7%94%A8-ajax-%E8%88%87-api-%E9%80%B2%E8%A1%8C%E8%B3%87%E6%96%99%E4%BA%92%E5%8B%95-jquery-ajax-api-xmlhttprequest-axios-javascript-%E4%BC%8A%E6%81%A9%E8%B8%A9%E5%9D%91%E7%AD%86%E8%A8%98-6c0d8e2ad8f0


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言