jQuery从零开始(三)-----ajax

mmywcoco 2019-12-06

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

相关推荐

mmywcoco / 0评论 2020-06-06