jQuery中对ajax的封装

一、底层接口

$.ajax({
    
    
        url:'xxx', // 请求地址
        type:'get', // 请求方式get/post
        data:{
    
    id:1,name:'张三'}, // 请求参数
        dataType:'json', // 用于设置响应体的类型,跟data参数没有关系
        beforeSend:function(){
    
    
          // 在所有发送请求操作(open,send)之前执行
        },
        success:function(res){
    
    
          // 回调函数,只有请求正常(状态码为200)才会执行这个函数
        },
        error:function(err){
    
    
          // 回调函数,只有请求不正常(状态码不为200)才会执行这个函数
        },
        complete:function(content){
    
    
          // 回调函数,不管是否请求成功,都会执行
        }
      })

二、全局事件处理

  //1.请求开始之前执行 ajaxStart
  $(document).ajaxStart(function(){
    
    
    // 只要有ajax请求发生就会执行
    //请求开始了 -- 可以在这处理loading动画
    $('.loading').fadeIn()
  })

  // 2.请求结束之后执行 ajaxStop
  $(document).ajaxStart(function(){
    
    
    // 只要有ajax请求结束就会执行
    //请求结束了 -- 可以在这处理loading动画
    $('.loading').fadeOut()
  }) 

三、get请求

      $.get('url',{
    
    id:1},function(res){
    
    
        console.log(res)
      })

四、post请求

      $.post('url',{
    
    id:1},function(res){
    
    
        console.log(res)
      })

五、请求json数据

      $.getJSON('url',{
    
    id:1},function(res){
    
    
        console.log(res)
      })
web前端技术交流QQ群:327814892

猜你喜欢

转载自blog.csdn.net/qq_43327305/article/details/103326458
今日推荐