jqueryajax 请求是 jQuery 封装好的异步 HTTP 请求工具,可以在页面不刷新的前提下,和后端服务器交换数据,核心方法包含.get 或者.ajax 全量参数写法。第三步配置 url 请求方式 data 请求头 数据类型 成功回调 失败回调。第四步处理返回数据,判断状态码,做好异常捕获,同时注意跨域 CSRF 缓存这些容易踩坑的点。总结来说 jqueryajax 请求本质是对原生异步请求的封装,适合老项目维护,新项目现在大多改用 fetch 或者 axios,但是掌握 jqueryajax 请求依旧是读懂历史前端代码的基础。
一 核心方法介绍
$.ajax 全能核心方法,支持全部配置项,最灵活
$.get 简写方法,对应 GET 请求
$.post 简写方法,对应 POST 请求
$.getJSON 专门请求 json 格式数据的简写方法
二 $.ajax 常用参数清单
url 请求接口地址
type 或者 method 请求类型,常用 get post
data 发送给后端的数据,可以是对象 字符串
dataType 预期返回数据类型,可选 json text html xml
success 请求成功执行的回调函数
error 请求失败执行的回调函数
complete 请求完成之后执行,不管成功还是失败都会运行
async 是否异步,默认 true,改成 false 会变成同步请求
headers 自定义请求头
cache 是否缓存 GET 请求,默认 true,部分场景需要设置 false 禁用缓存
timeout 请求超时时间,单位毫秒
三 基础代码结构
$.ajax ({
url 接口地址,
type post,
data {name 张三 age 18},
dataType json,
success function res {
console.log res
},
error function xhr status err {
console.log 请求出错
}
})
四 简写方法示例
$.get url, data, function res 成功回调
$.post url, data, function res 成功回调
$.getJSON url, data, function res 成功回调
五 常见问题对比表格
| 问题 | 产生原因 | 解决方式 |
|---|---|---|
| 请求跨域报错 | 后端没有配置跨域允许 | 后端配置 CORS 或者代理转发 |
| GET 请求拿到旧数据 | 浏览器缓存 | 设置 cache false |
| 回调不执行 | jQuery 没有引入 接口 404 | 检查库引入 核对接口地址 |
| POST 参数后端接收不到 | 编码格式不匹配 | 设置 contentType |
| 请求超时 | 接口响应太慢 | 调大 timeout 优化后端接口 |
六 重要注意事项
第一 async 设置为 false 同步请求会阻塞浏览器页面渲染,现代项目不推荐使用
第二 jqueryajax 请求默认 Content-Type 对于表单提交是 application x-www-form-urlencoded,如果要提交 json 字符串,需要手动设置 contentType 为 application json
第三 新版本 jQuery 已经支持 Promise 写法,可以使用 then catch,不再只依赖 success error 回调
第四 跨域请求如果携带 cookie,需要设置 xhrFields withCredentials true
第五 注意 jQuery 版本差异,旧版本 jQuery 的 ajax 参数 type,新版本推荐使用 method,两种写法都兼容
七 和现代请求库对比
jqueryajax 请求属于 jQuery 内置模块,不需要额外安装,但是依赖整个 jQuery 库,体积偏大
axios 独立第三方库,支持拦截器 请求取消,生态更完善,是现在主流方案
fetch 是浏览器原生 API,不需要依赖任何库,但是底层 API 偏底层,需要自己封装异常处理
【常见问题】
问题 1 jqueryajax 请求跨域怎么解决
回答 1 jqueryajax 请求跨域一般优先由后端配置 CORS 响应头,前端也可以通过开发环境代理转发,jqueryajax 请求本身不能绕过浏览器同源策略。
问题 2 jqueryajax 请求 POST 传 json 数据要改什么配置
回答 2 jqueryajax 请求 POST 传 json 数据,需要手动设置 contentType 为 application json,同时把 data 转换成 json 字符串,否则后端无法正确解析 json 参数。
问题 3 jqueryajax 请求为什么 GET 请求总是拿到缓存数据
回答 3 jqueryajax 请求 GET 默认开启浏览器缓存,可以在 ajax 配置里面把 cache 设置为 false,或者在 url 后面追加随机参数,强制浏览器不读取旧缓存。
【免责申明】
本文内容仅作为前端技术学习参考,jQuery 相关 API 会随版本迭代存在差异,实际项目开发请对照对应版本官方文档,代码示例仅作演示,不直接用于生产环境。


