[JavaScript知识库]jQuery 发起 Ajax 请求最常用的三个方法

????????浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。

jQuery 中发起 Ajax 请求最常用的三个方法如下：

• $.get()
• $.post()
• $.ajax()

一、$.get()

????????jQuery 中 $.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。
语法：

$.get(url, [data], [callback])

其参数如下表：

• 发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即即可

$.get('http://www.liulongbin.top:3006/api/getbooks',
  function (res) {
    console.log(res); // res 是服务器返回的数据
  })

• 发起带参数的请求时，以参数对象的形式添加第二个参数

$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 },
  function (res) {
    console.log(res);
  })

二、$.post()? ??

????????jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。
语法：

$.post(url, [data], [callback])

其参数如下表：

• 使用 $post() 向服务器提交数据

$.post('http://www.liulongbin.top:3006/api/addbook', { bookname: '肉蒲团', author: '李渔', publisher: '艺雅出版社' }, // 提交的数据
  function (res) { // 回调函数
    console.log(res);
  })

三、$.ajax()

????????相比于 $.get() 和 $.post() 函数，jQuery 中提供的 $.ajax() 函数是一个功能比较综合的函数，它允许我们对 Ajax 请求进行更详细的配置。
语法：

$.ajax({
  type: ' ', // 请求的方式，如 GET 或 POST
  url: ' ', // 请求的URL地址
  data: {}, // 这次请求携带的数据
  success: function (res) { } // 请求成功后的回调函数
})

• 使用$.ajax()发起GET请求时，只需要将 type 属性的值设置为 ‘GET’ 即可

$.ajax({
  type: 'GET', // 请求的方式
  url: 'http://www.liulongbin.top:3006/api/getbooks', // 请求的URL地址
  data: { // 这次请求携带的数据
    id: 1
  },
  success: function (res) { // 请求成功后的回调函数
    console.log(res);
  }
})

• 使用$.ajax()发起POST请求时，只需要将 type 属性的值设置为 ‘POST’ 即可

$.ajax({
  type: 'POST', // 请求的方式
  url: 'http://www.liulongbin.top:3006/api/addbook', // 请求的URL地址
  data: { // 要提交给服务器的数据
    bookname: '史记',
    author: '司马迁',
    publisher: '上海图书出版社'
  },
  success: function (res) { // 请求成功后的回调函数
    console.log(res);
  }
})