jQuery入门（五）

这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战

发送 ajax 请求

• 发送 get 请求

  // 直接使用 $.get 方法来发送一个请求
  /*
  	参数一： 请求地址
  	参数二： 请求时携带的参数
  	参数三： 请求成功的回调
  	参数四： 返回的数据类型
  */
  $.get('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')
  

• 发送 post 请求

  // 直接使用 $.post 方法来发送一个请求
  /*
  	参数一： 请求地址
  	参数二： 请求时携带的参数
  	参数三： 请求成功的回调
  	参数四： 返回的数据类型
  */
  $.post('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')
  

• 综合发送 ajax 请求

  // 使用 $.ajax 方法
  // 只接受一个参数，是一个对象，这个对象对当前的请求进行所有的配置
  $.ajax({
      url: './ajax',   // 必填，请求的地址
      type: 'GET',   // 选填，请求方式，默认是 GET（忽略大小写）
      data: {},   // 选填，发送请求是携带的参数
      dataType: 'json',   // 选填，期望返回值的数据类型，默认是 string
      async: true,   // 选填，是否异步，默认是 true
      success () {},   // 选填，成功的回调函数
      error () {},   // 选填，失败的回调函数
      cache: true,   // 选填，是否缓存，默认是 true
      context: div,   // 选填，回调函数中的 this 指向，默认是 ajax 对象
      status: {},   // 选填，根据对应的状态码进行函数执行
      timeout: 1000,   // 选填，超时事件
  })
  

• 发送一个 jsonp 请求

  // 使用 $.ajax 方法也可以发送 jsonp 请求
  // 只不过 dataType 要写成 jsonp
  $.ajax({
      url: './jsonp.php',
      dataType: 'jsonp',
      data: { name: 'Jack', age: 18 },
      success (res) {
          console.log(res)
      },
      jsonp: 'cb',  // jsonp 请求的时候回调函数的 key
      jsonpCallback: 'fn'   // jsonp 请求的时候回调函数的名称
  })
  

全局 ajax 函数

• 全局的 ajax 函数我们也叫做 ajax 的钩子函数
• 也就是在一个 ajax 的整个过程中的某一个阶段执行的函数
• 而且每一个 ajax 请求都会触发

ajaxStart

• 任意一个请求在 开始 的时候就会触发这个函数

  $(window).ajaxStart(function () {
      console.log('有一个请求开始了')
  })
  

ajaxSend

• 任意一个请求在 准备 send 之前 会触发这个函数

  $(window).ajaxSend(function () {
      console.log('有一个要发送出去了')
  })
  

ajaxSuccess

• 任意一个请求在 成功 的时候就会触发这个函数

  $(window).ajaxSuccess(function () {
      console.log('有一个请求成功了')
  })