常用选项参数介绍:
url:请求地址
type:请求方法,默认为 get
dataType:服务端响应数据类型
contentType:请求体内容类型,默认 application/x-www-form-urlencoded
data:需要传递到服务端的数据,如果 GET 则通过 URL 传递,如果 POST 则通过请求体传递
timeout:请求超时时间
beforeSend:请求发起之前触发
success:请求成功之后触发(响应状态码 200)
error:请求失败触发
complete:请求完成触发(不管成功与否)
==============================================================
demo1:
$.ajax({
url: 'json.php',
type: 'get',
// 设置的是请求参数
data: { id: 1, name: '张三' },
// 用于设置响应体的类型 注意 跟 data 参数没关系!!!
dataType: 'json',
success: function (res) {
// 一旦设置的 dataType 选项,就不再关心 服务端 响应的 Content-Type 了
// 客户端会主观认为服务端返回的就是 JSON 格式的字符串
console.log(res)
}
})
==============================================================
demo2:
$.ajax({
url: 'time.php',
type: 'get',
beforeSend: function (xhr) {
// 在所有发送请求的操作(open, send)之前执行
console.log('beforeSend', xhr)
},
success: function (res) {
// 隐藏 loading
// 只有请求成功(状态码为200)才会执行这个函数
console.log(res)
},
error: function (xhr) {
// 隐藏 loading
// 只有请求不正常(状态码不为200)才会执行
console.log('error', xhr)
},
complete: function (xhr) {
// 不管是成功还是失败都是完成,都会执行这个 complete 函数
console.log('complete', xhr)
}
})
==============================================================
demo3:
get&&&post&JSON的快捷请求方法:
$.get('json.php', { id: 1 }, function (res) {
console.log(res)
})
$.post('json.php', { id: 1 }, function (res) {
console.log(res)
})
$.getJSON('json.php', { id: 1 }, function (res) {
console.log(res)
})
===========================================================
jQuery全局事件处理函数:
$(document)
.ajaxStart(function () {
// 只要有 ajax 请求发生 就会执行
$('.loading').fadeIn()
// 显示加载提示
console.log('注意即将要开始请求了')
})
.ajaxStop(function () {
// 只要有 ajax 请求结束 就会执行
$('.loading').fadeOut()
// 结束提示
console.log('请求结束了')
})
$('#btn').on('click', function () {
// $.ajax({
// url: 'time.php'
// })
$.get('time.php')
})