# 一、jQuery 的 ajax

  jQuery 中的 Ajax 函数,是基于 xhr 对象封装出来的。

# 1、原生版模板

  jQuery 的 ajax 封装限制相对宽松:

  • 所有要传的数据用 data,并且不用管数据类型
  • 请求类型与其他不同采用 type 而不是 method

提示

在 jQuery 中,使用$.ajax时:get 和 post 请求都 💖 用 data

$.ajax({
  url: '',
  type: '',
  data: {},
  success: function () {},
  error: function () {}
})

# 2、请求示例

  • get 请求
<body>
  <script src="./lib/jquery.min.js"></script>
  <script>
    $.ajax({
      type: 'GET',
      url: 'http://jsonplaceholder.typicode.com/posts',
      data: { id: 1 },
      success: function (res) {
        console.log(res)
      }
    })
  </script>
</body>
  • post 请求
<body>
  <script src="./lib/jquery.min.js"></script>
  <script>
    $.ajax({
      type: 'POST',
      url: 'http://jsonplaceholder.typicode.com/posts',
      data: {
        title: 'foo',
        body: 'bar',
        userId: 1
      },
      success: function (res) {
        console.log(res)
      }
    })
  </script>
</body>

# 二、Promise 与 $.ajax

  一开始 jQuery 的 ajax 是不支持 Promise,但后来我们可以就可以了。

# 1、Promise 版模板

$.ajax({
  url: '',
  type: '',
  data: {}
})
  .then((res) => {})
  .catch((err) => {})

# 2、精简化 ✨

  由于在开发中 get、post 请求比较常用,所以 jQuery 还提供了两者的简写版本$.get()$.post()

$.get(url, data, callback(data, status, xhr), dataType)
  • get 请求
$('#btn').click(async function () {
  // 方式1 ✔
  $.get('http://jsonplaceholder.typicode.com/posts', { id: 1 }, function (res) {
    console.log(res)
  })

  // 方式2
  $.get('http://jsonplaceholder.typicode.com/posts', { id: 1 }).then((res) => {
    console.log(res)
  })

  // 方式3👏
  var res = await $.get('http://jsonplaceholder.typicode.com/posts', { id: 1 })
  console.log(res)
})
  • post 请求
// 同理

# 三、jsonp 扩展

  其实 jsonp 并不属于 ajax 的范畴,但 jQuery 将它们搞到一起了。

当然我们知道,现在跨域是不会用 jsonp 的,它太局限了,只能发 get 请求。

  • 原生 js
<body>
  <script>
    $(function () {
      var scriptTag = document.createElement('script')
      // 可以自定义callback函数的函数名
      scriptTag.src = 'http://127.0.0.1:3000/api/list?callback=listBack'
      document.body.appendChild(scriptTag)

      scriptTag.onload = function () {
        scriptTag.remove()
      }
    })

    function listBack(obj) {
      console.log(obj)
    }
  </script>
</body>
  • jQuery 方式

像下面的 jsonpCallback 属性可以不用自定义,jQuery 会自动生成,并且结果可以在 success 中打印查看。

<body>
  <script src="./lib/jquery.min.js"></script>
  <script>
    $(function () {
      $.ajax({
        url: 'http://127.0.0.1:3000/api/list',

        dataType: 'jsonp',
        jsonp: 'callback',
        // 可以自定义🚩callback函数的函数名
        // jsonpCallback: 'listBack',

        // 携带的参数
        data: {},

        success: function (res) {
          console.log(res)
        }
      })

      // function listBack(res) {
      //   console.log(res)
      // }
    })
  </script>
</body>

# 四、jQuery 的 ajax 钩子函数

  jQuery 中的 ajax 其实也提供了类似于 axios 拦截器的功能。

$(window).ajaxStart(function () {
  console.log('第一个ajax请求准备开始执行')
  console.log('显示loading')
})

$(window).ajaxSend(function () {
  console.log('每一个ajax请求准备执行了')
  console.log('显示loading')
})

$(window).ajaxSuccess(function () {
  console.log('每一个ajax请求成功执行了')
  console.log('隐藏loading')
})

$(window).ajaxError(function () {
  console.log('每一个ajax请求失败执行了')
  console.log('隐藏loading')
})

$(window).ajaxComplete(function () {
  console.log('每一个ajax请求执行了')
  console.log('隐藏loading')
})

$(window).ajaxStop(function () {
  console.log('最后一个ajax请求成功执行了')
})
更新于 : 7/8/2024, 10:21:14 AM