透过 jQuery 使用 Ajax 与 API 进行资料互动(jQuery, Ajax, API, XMLHttpReq

在上一篇稍微讲解了一下 认识 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


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章