jQuery的Ajax

jQuery的Ajax

浏览器中提供的XMLHttpRequest 用法比较复杂，jQuery对XMLHttpRequest进行封装，提供了一些列Ajax相关的函数，降低了Ajax的使用难度

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

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

$.get()

专门用来发起get请求，将服务器上的资源请求到客户端进行使用

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

url   参数类型 string  必填  要请求的资源地址
data  参数类型 object  不是必填 请求资源要携带的参数
callback  参数类型 function  不是必填 请求成功的回调函数
1
2
3
4
5

不带参数的请求

$('#btn').on('click', function () {
      // $.get 发起不带参数的请求
      $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
        // res就是服务器响应回来的数据
        console.log(res)
      })
    })
1
2
3
4
5
6
7

带参数的请求

$('#btn1').on('click', function () {
      // $.get 发起带参数的请求

      $.get(
        'http://www.liulongbin.top:3006/api/getbooks',
        { id: 1, bookname: '西游记' },
        function (res) {
          console.log(res)
        }
      )
    })
1
2
3
4
5
6
7
8
9
10
11

$.post()

专门用来发起post请求，向服务器提交数据

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

url   参数类型 string  必填  提交数据的地址
data  参数类型 object  不是必填 要提交的数据
callback  参数类型 function  不是必填 数据提交成功的回调函数
1
2
3
4
5

  $(function () {
      $('#btnPost').on('click', function () {
        $.post(
          'http://www.liulongbin.top:3006/api/addbook',
          { bookname: 'js编程语法', author: 'hello', publisher: '天津' },
          function (res) {
            console.log(res)
          }
        )
      })
    })
1
2
3
4
5
6
7
8
9
10
11

$.ajax()

是一个功能比较综合的函数，允许我们对ajax请求进行更详细的配置

$.ajax({
    type:"",  //请求的方式   例如 GET或POST
    url:"",   // 请求的url地址
    data:{},   //  请求要携带的数据
    success:function(res){}   //请求成功之后的回调函数
})
1
2
3
4
5
6

$.ajax()发起get请求

 $.ajax({
          type: 'GET',
          url: 'http://www.liulongbin.top:3006/api/getbooks',
          data: { id: 1 },
          success: function (res) {
            console.log(res)
          },
        })
1
2
3
4
5
6
7
8

$.ajax()发起post请求

  $(function () {
      $('#btn').on('click', function () {
        var obj = {
          bookname: 'ja编程',
          author: 'java',
          publisher: '上海图书出版社',
        }
        $.ajax({
          type: 'POST',
          url: 'http://www.liulongbin.top:3006/api/addbook',
          data: obj,
         // success: function (res) {
          //   console.log(res)
          // },
          // 对象中的方法可以简写为下面
          success(res) {
            console.log(res)
          },
        })
      })
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

接口

使用Ajax请求数据时，请求的url地址，就叫做 数据接口(简称接口)，每个接口必须有请求方式

http://www.liulongbin.top:3006/api/addbook  添加图书接口(post请求)
http://www.liulongbin.top:3006/api/getbooks 获取图书列表接口(get请求)
1
2

postman

为了验证接口能否被正常访问，使用接口测试工具，来对数据接口进行检测

好处：接口测试工具能让我们在不写代码的情况下，对接口进行调用和测试

下载

https://www.postman.com/downloads/

接口文档

接口文档可以包含很多信息，也可以按需进行精简，但是一个合格的接口文档，应该包含以下6个内容，为接口的调用提供依据

• 接口名称 用来标识各个接口的简单说明 如登录接口
• 接口url 接口的调用地址
• 调用方式 接口的调用方式 如GET 或POST
• 参数格式 接口需要传递的参数 每个参数必须包含 参数名称 参数类型 是否必选 参数说明‘
• 响应格式 接口的返回值的详细描述 ，包含数据名称 数据类型 说明
• 返回示例 通过对象的形式，列举服务器返回数据的结构