jq当中的ajax技术
$.ajax
$.get()
$.post()
$.load()
$.ajax({
url:'请求文件的地址',
type:'请求文件使用的方法',
data:'向请求的api发送的数据',(不需要可以不写)例:'name=zhangsan&pwd=123'
async:true, //是否开启异步,默认值为true表示开启异步
datatype:预期的服务器返回的数据类型,
sucess: (data)=> { 回调函数
console.log(data);
}
error:请求失败后的回调函数,
complete:请求不论成功还是失败的回调函数
})
jq的ajax方法返回值是一个promise,那么就可以使用then或者async配合
let info =$.ajax({
url:'action.php' , //请求数据的地址
type:'post' //请求文件使用的方法 post/get
})
这个时候打印info会发现它是一个promise对象 console.log(info);
info.then(msg=>{
console.log(msg)
})
采用async的写法:
async function getData(){
let msg = await $.ajax({url:'action.php(请求数据的地址)' ,type:'post(请求数据的方法)'})
console.log(msg);
}
getData();
$.post jq的post方法:
$.post(URL,data,function(data,status,xhr),dataType)
例如:
let url ="action.php";
data = "name = zhangsan";
$.post(url,function(data,status){
console.log(data,status)
})
$.get jq的get方法:
$.get(URL,data,function(data,status,xhr),dataType)
例如:
let url ="action.php";
data = "name = zhangsan";
$.get(url,data,function(data,status){
console.log(data,status)
})
async写法:
async function getData() {
let msg = await $.get('action.php');
console.log(msg);
}
getData();
$.post() jq的load方法:
例如:给定一个容器,直接将请求的数据加载到容器里面(不建议这么使用)
$('#main').load('action.php')
jq插件有很多的动画效果等待我们去发现例如轮播图滑动效果等。