Ajax了解及请求方式

服务器

请求&响应

五种常见的请求方式

接口和接口文档的使用

Axios语法

语法:

用params还是data

---

服务器

1. 存储网络资源的一台电脑

2. 数据:是存在于服务器的

• 网站中使用的文件（html、css、图片、......）这些东西就叫做资源

• 数据也是服务器上的资源，而且是一个网站的灵魂

请求&响应

1. 请求是浏览器发送的

2. 响应就是服务器返回数据的过程

3. 请求图片、网页不需要ajax技术

4. Ajax请求,是操作服务器上的数据的

五种常见的请求方式

不同的请求目的，对应着不同的请求方式

查询获取数据：

请求方式：GET

添加数据：

请求方式:POST

删除数据：

请求方式：DELETE

修改数据：

请求方式：PUT/PATCH

• PUT侧重于完整的修改

• PATCH侧重于部分修改

接口和接口文档的使用

到底使用params,还是data:

• 接口文档描述Query参数或查询参数,使用params

• 接口文档描述body参数或请求体,使用data

Axios语法

Axios是别人封装的库(里面封装了很多的函数)

Axios的语法是固定的

Axios语法参考网站:Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

语法:

Axios({请求的配置}).then(result=>{})

GET语法练习:

<!-- 引入axios.js -->

<script src="./axios.js"></script>
<script>
  // 发送GET请求
  // axios().then()
  // axios({ /* 请求的配置 */ }).then(result => { /* result.data 就是响应结果 */ })

  axios({
    // 键: 值,
    // 键: 值,
    method: 'GET', // method 指定请求方式; GET不区分大小写，建议大写
    url: 'http://www.itcbc.com:3006/api/getbooks'
  }).then(result => {
    console.log(result.data) // result.data 才是真正的服务器响应的结果
  })

</script>

带条件的GET请求:

• 带条件的查询，另一个说法是带查询参数

• 在请求的配置项中，加 params 配置即可

// axios({ /* 请求的配置 */ }).then(result => {})
axios({
  // method/url/params
  method: 'GET',
  url: '地址',
  // 查询条件(查询参数)
  params: {
    id: 38255,
    bookname: '测试'
  }
}).then(result => {
  console.log(result.data) // result.data 才是服务器返回的结果
})

用params还是data

看接口文档即可：

• 接口文档写的是”查询参数”或者”Query参数”，则使用 params

• 接口文档写的是”请求体”或者 ”body参数”，则使用 data