jQuery从零开始-----ajax

Posted 2020-11-24 冬冬先生

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插件有很多的动画效果等待我们去发现例如轮播图滑动效果等。