jQuery请求 | 任先生的笔记库

# 一、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请求成功执行了')
})

← Fetch请求 Axios请求（上） →