jQuery 基础知识

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天 发送 ajax 请求

• 发送 get 请求 // 直接使用 $.get 方法来发送一个请求 /* 参数一： 请求地址 参数二： 请求时携带的参数 参数三： 请求成功的回调 参数四： 返回的数据类型 */$.get('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')
• 发送 post 请求 // 直接使用 $.post 方法来发送一个请求 /* 参数一： 请求地址 参数二： 请求时携带的参数 参数三： 请求成功的回调 参数四： 返回的数据类型 */$.post('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')
• 综合发送 ajax 请求 // 使用 $.ajax 方法 // 只接受一个参数，是一个对象，这个对象对当前的请求进行所有的配置$.ajax({ url: './ajax', // 必填，请求的地址 type: 'GET', // 选填，请求方式，默认是 GET（忽略大小写） data: {}, // 选填，发送请求是携带的参数 dataType: 'json', // 选填，期望返回值的数据类型，默认是 string async: true, // 选填，是否异步，默认是 true success () {}, // 选填，成功的回调函数 error () {}, // 选填，失败的回调函数 cache: true, // 选填，是否缓存，默认是 true context: div, // 选填，回调函数中的 this 指向，默认是 ajax 对象 status: {}, // 选填，根据对应的状态码进行函数执行 timeout: 1000, // 选填，超时事件 })
• 发送一个 jsonp 请求 // 使用 $.ajax 方法也可以发送 jsonp 请求 // 只不过 dataType 要写成 jsonp$.ajax({ url: './jsonp.php', dataType: 'jsonp', data: { name: 'Jack', age: 18 }, success (res) { console.log(res) }, jsonp: 'cb', // jsonp 请求的时候回调函数的 key jsonpCallback: 'fn' // jsonp 请求的时候回调函数的名称 })

全局 ajax 函数

• 全局的 ajax 函数我们也叫做 ajax 的钩子函数
• 也就是在一个 ajax 的整个过程中的某一个阶段执行的函数
• 而且每一个 ajax 请求都会触发

ajaxStart

• 任意一个请求在 开始 的时候就会触发这个函数 $(window).ajaxStart(function () { console.log('有一个请求开始了') })

ajaxSend

• 任意一个请求在 准备 send 之前 会触发这个函数 $(window).ajaxSend(function () { console.log('有一个要发送出去了') })

ajaxSuccess

• 任意一个请求在 成功 的时候就会触发这个函数 $(window).ajaxSuccess(function () { console.log('有一个请求成功了') })

ajaxError

• 任意一个请求在 失败 的时候就会触发这个函数 $(window).ajaxError(function () { console.log('有一个请求失败了') })

ajaxComplete

• 任意一个请求在 完成 的时候就会触发这个函数 $(window).ajaxComplete(function () { console.log('有一个请求完成了') })

ajaxStop

• 任意一个请求在 结束 的时候就会触发这个函数 $(window).ajaxStop(function () { console.log('有一个请求结束了') })