码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-12-06 21:59:13      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:打印   返回   默认值   ack   插件   The   main   erro   san   

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

 

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

标签:打印   返回   默认值   ack   插件   The   main   erro   san   

原文地址:https://www.cnblogs.com/dongdong1996/p/11995369.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!