jQuery封装的ajax请求有3种方式
-
$.get() get请求方式,有4个参数,必填参数是url地址,其他参数是选填参数,可以没有,参数是对象形式
$.get({ url:地址(必填) data:携带的参数,对象形式 dataType:期望的数据类型,如果为json,会将后端返回的json串,自动解析 success:function(){} 请求成功时执行的函数 }) // 案例:get方式 $('button').click(function(){ $.get({ // 对 url 地址的PHP文件发起请求 url : './get.php', // 请求时携带参数,参数以对象形式定义 data : {name:'张三' , pwd:123456}, // 没有设定 dataType 参数,res中的响应体 // 后端给什么,res中,就存储什么 // 设定 dataType : 'json', 会自动解析响应体json串 dataType : 'json', // 请求成功时,执行的函数 // 函数的参数,存储响应体 // 自定义形参 res 中 存储的就是响应体 success : function(res){ console.log(res) } }) })
-
$.post() post请求方式,有4个参数,必填参数是url地址,其他参数是选填参数,可以没有,参数是对象形式
$.post({ url: 地址(必填) data: 携带的参数,对象形式 dataType: 期望的数据类型,如果为json,会将后端返回的json串,自动解析 success:function(){} 请求成功时执行的函数 }) // 案例:post方式 $('button').click(function(){ $.post({ // 对 url 地址的PHP文件发起请求 url : './post.php', // 请求时携带参数,参数以对象形式定义 data : {name:'张三' , pwd:123456}, // 没有设定 dataType 参数,res中的响应体 // 后端给什么,res中,就存储什么 // 设定 dataType : 'json', 会自动解析响应体json串 dataType : 'json', // 请求成功时,执行的函数 // 函数的参数,存储响应体 // 自定义形参 res 中 存储的就是响应体 success : function(res){ console.log(res) } }) })
-
$.ajax() ajax请求方式,有n个参数
$.ajax({
常用参数:
url: 地址
type/method: 请求方式,默认值是get方式
data: 传参参数,必须是对象形式
dataType: json,设定为json,会自动解析响应体中的json串
success:function(){} 请求成功时执行的函数
其他参数:
async: 设定是否异步,默认值是true,异步执行ajax请求
error:function(){} 请求错误时执行的函数
timeout: 设定事件,单位毫秒,如果请求时间超过设定时间,认为是请求失败,必须是异步执行
cache: 设定是否缓存请求结果,默认值是true,缓存请求结果,必须是get方式,这个设定才起作用
post方式不会缓存,设定也没有效果
context: 指定执行函数中this的指向
...
})
// 案例:
const obj = {};
$('button').click(function(){
$.ajax({
// 对 url 地址的PHP文件发起请求
url : './get.php',
// 请求方式,不写就是,默认值get.
type: 'get',
// data传参参数
data : {name:'张三',pwd:123456},
// dataType, 设定 json 解析响应体的json串
dataType : 'json',
success : function(res){
console.log(res);
console.log(this);
},
// 不常用的
// async : false, // 设定异步
// 请求成功不执行,请求失败才执行
error : function(res){
console.log(res)
},
// timeout : 1, // 超时报错,但是必须是异步执行
cache : false, // 如果是不缓存,会在数据后有一个 _数值 的时间戳
// 告诉程序,这个结果的获取时间
context : obj , // this默认指向 ajax对象 , 可以设定this的指向
})
console.log('我是同步执行的程序');
})