二、初识Ajax

92 阅读1分钟

二、初识Ajax

(一)Ajax基础用法

1、axios:是前端圈最火的、专注于数据请求的库

2、axios的基本语法

axios({
      method: '请求的类型',
      url: '请求的URL地址',
      
  }).then((result) => { 
  //then用来指定请求成功之后的回调函数
  //形参中的result是请求成功之后的结果
  });

3、axios发起GET请求

测试GET请求的URL地址为:www.itcbc.com:3006/api/getbook…

axios({
      method: 'GET',
      url: 'http://www.itcbc.com:3006/api/getbooks',
      
  }).then((result) => { 
  //then用来指定请求成功之后的回调函数
  //形参中的result是请求成功之后的结果
    console.log(result)
  });

4、axios发起POST请求

测试GET请求的URL地址为:www.itcbc.com:3006/api/getbook…

axios({
      method: 'POST',
      url: 'http://www.itcbc.com:3006/api/addbook',
      data:{
          bookname: '窗边的小豆豆',
          author: '黑柳彻子',
          publisher: '南海出版社',
      }
      
  }).then((result) => { 
  //then用来指定请求成功之后的回调函数
  //形参中的result是请求成功之后的结果
      console.log(result)
  });

(二)接口相关的基础概念

1、接口的概念:使用Ajax请求数据时,被请求的URL地址,就叫做数据接口(简称:接口或API接口)。例如:

1) www.itcbc.com:3006/api/getbook… 获取图书列表的接口(GET 请求)

2) http://www. itcbc.com:3006/api/addbook 添加图书的接口(POST 请求)

2、接口文档的概念:接口文档就是接口是使用说明书,它是我们调用接口的依据

3、接口文档的格式

Ajax 课程案例接口文档 docs.apipost.cn/preview/f62…

image_vaZPR3c7T9.png