案例代码详细代码地址：juejin.cn/post/709163…
使用 Ajax 请求数据的 5 种方式
| 1 | POST | 向服务器新增数据 |
|---|---|---|
| 2 | GET | 从服务器获取数据 |
| 3 | DELETE | 删除服务器上的数据 |
| 4 | PUT | 更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息） |
| 5 | PATCH | 更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号） |
get请求
GET 请求用于从服务器获取数据：
post请求
POST 请求用于向服务器新增数据：
delete 请求
DELETE 请求用于删除服务器上的数据
put请求
PUT 请求用于更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息）：
patch 请求
PATCH 请求用于更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号）：
小结：
操作服务器上的数据除了要使用** URL地址 ，还需要指定请求方式**
操作服务器上的数据时： 获取服务器上的数据，需要使用get方式 新增（添加）数据，需要使用post 方式 删除数据，需要使用delete方式 完整修改（更新）数据，需要使用put方式 修改（更新）部分数据，需要使用patch 方式
ajax的基础用法
axios的基础语法
axios（发音：艾克C奥斯） 是前端圈最火的、专注于数据请求的库。 在后面的 Vue、React 课程中都会用到 axios 来请求数据。 中文官网地址：www.axios-http.cn/ 英文官网地址：www.npmjs.com/package/axi…
get请求的查询参数
测试 GET 请求的 URL 地址为 www.itcbc.com:3006/api/getbook…
=》result
刚才查询回来的是所有图书的列表数据，如果想指定查询的条件，可以通过 params 选项来指定查询的参数
基于axios发起的post请求
使用 axios 发起 POST 请求时，只需要将 method 属性的值设置为 'POST' ，URL地址改为 '/api/addbook'：
接口相关的基础概念
使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称：接口或 API 接口）。 同时，每个接口必须有对应的请求方式。例如：
www.itcbc.com:3006/api/getbook… 获取图书列表的接口(GET 请求) http://www. itcbc.com:3006/api/addbook 添加图书的接口（POST 请求）
接口文档的概念
接口文档就是接口的使用说明书，它是我们调用接口的依据。
备注：接口文档是后端程序员写的
| 组成部分 | 说明 |
|---|---|
| 接口名称 | 接口的名称，用来快速区分每个接口的作用。如：登录接口、添加图书接口 |
| 接口 URL | 客户端发起 Ajax 调用此接口时，请求的 URL 地址 |
| 请求方式 | 接口的请求方式，如：GET、POST、PUT、DELETE 等 |
| 请求参数 | 请求此接口时，需要发送到服务器的查询参数或请求体 |
| 返回示例 | 当接口请求成功后，服务器响应回来的数据的基本格式 |
| 返回参数说明 | 接口响应结果的详细描述 |
Ajax案例接口文档 docs.apipost.cn/preview/f62…
删除功能 delete请求
参照接口文档，发现删除图书，需要使用必填的id参数。 循环遍历数据时，将id值存储到 删除按钮的 自定义属性（data-id）中 单击 删除 按钮时，获取自定义属性data-id的值，这个值就是id
弹出框
put请求 修改图书
appkey
服务器存储的图书，分为通用数据和个人数据。 默认获取、添加、删除、修改的都是通用数据。 在获取、添加、删除、修改时，如果带appkey参数，则表示使用个人数据。
ajax错误修改
开发或学习时，难免会遇到错误。 遇到ajax方面的错误，该怎么排查呢？ 答案： 浏览器的 network 面板。
有关Ajax方面的错误，不应只查看 “Console”面板，必须通过 “Network”面板进行排查
network面板查看请求状态（重要）
200 表示成功 pending 表示等待（可能网络不好或者断网了） 4xx 和 5xx 都表示不同程度的错误 Failed 表示失败
请求方式和完整的url（重要）
network工具查看服务器响应状态
遇到Ajax的错误，千万不要盯着 Console 面板看 一定要通过 network 面板排查错误以及找资料
form 表单 & 文件上传
什么是表单？
表单的三个组成部分
网页中采集数据的表单由三个部分组成，分别是：表单标签、表单域、表单按钮。
在网页中，表单主要负责数据采集功能。例如
1.表单的三个组成部分 - 表单标签
HTML 的
就是表单标签，它是一个“容器”，用来将页面上指定的区域划定为表单区域：
2.表单的三个组成部分 - 表单域
表单域提供了采集用户信息的渠道，常见的表单域有：input、textarea、select 等
3.表单的三个组成部分 - 表单按钮
当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器。
疑问：form 表单如何指定请求的 URL 地址和请求方式呢？ 答案：需要用到 标签的 3 个专有属性了！
< form > 标签的属性一览表
< form > 标签最重要的 3 个属性分别是 action、method 和 enctype。简介信息如下表所示：
| 属性 | 可选值 | 说明 |
|---|---|---|
| action | 接口的 url 地址 | 把表单采集到的数据，提交到哪个接口中 |
| method | GET 或 POST | 数据的提交方式（默认值为 GET） |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain（很少用） | 数据的编码格式。具体指的是：把表单数据提交给服务器之前，如何对将要提交的数据进行编码 （默认值 application/x-www-form-urlencoded） |
注意：enctype 属性只能搭配 POST 提交方式一起使用；如果是 GET 提交，则 enctype 没有意义！
以get方式提交表单数据
在 标签上，通过 action 属性指定提交的 URL 地址，通过 method 属性指定提交的方式为 GET
注意：由于 method 属性的默认值就是 GET，因此上述的 method="GET" 可以被省略！
以post方式提交表单数据
在 标签上，通过 action 属性指定提交的 URL 地址，通过 method 属性指定提交的方式为 POST，并通过 enctype 属性指定数据的编码方式为 application/x-www-form-urlencoded：
注意：由于 enctype 的默认值就是 application/x-www-form-urlencoded，因此上述的 enctype 可以被省略！
表单提交的问题：
产生问题的原因：
表单身兼数职：既负责采集数据，又负责把数据提交到服务器！表单的默认提交行为会导致页面的跳转。
解决方案：
表单只负责采集数据； Ajax 负责将数据提交到服务器。（符合：职能单一的原则）
通过 Ajax 提交表单采集到的数据，可以防止表单默认提交行为导致的页面跳转问题，提高用户的体验。
1.监听表单的 submit 提交事件 2.阻止默认提交行为 3.基于 axios 发起请求 4.指定请求方式、请求地址 5.指定请求体数据
axios 请求方法的别名（简写）
在实际开发中，常用的 5 种请求方式分别是： GET、POST、PUT、PATCH、DELETE
为了简化开发者的使用过程，axios 为所有支持的请求方法提供了别名： axios.get(url[, config])
axios.delete(url[, config]) axios.post(url[, data[, config]])
axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])
简写总结：
axios拦截器
很多功能 都需要和服务器 交互 发送网络请求
上传头像 网络很慢、上传的文件很大
整个页面 没有相应的 状态
发送请求的时候 都显示一个 加载中的友好提示
复杂项目来说， 几百个接口 - 几百个网络请求 如何方便优雅的实现
自己根据发送的请求来 显示加载中！！
1 html+css 来实现加载中
1 很多的ul框架 全部都会提供 加载中的 小小效果
2 自己来简单写一个加载中 即可
2 自己根据发送的请求来 显示加载中！ axios内置的拦截器代码功能 在任意的请求
在发送请求前 拦截 处理一下 - 显示加载中
在数据响应来 拦截 处理一下 - 关闭加载中
普通人 想出去吉山
出去前 验证你核酸
回来后 验证你核算
1.添加请求拦截器
2.添加响应拦截器
3.发送网络请求
fontData
FormData 是一个浏览器对象。用于管理表单数据。
理解：
用于快速收集表单数据 并且可以将创建的FormData对象直接提交给接口。 典型应用场景：FormData + Ajax 技术实现文件上传的功能。
FormData 快速获取表单的数据：
1 forEach
URLSearchParams 数据转成 get传参数据格式
1 append（）
2 toString()
假设需要收集 ……
里面的所有表单项的值 要求，每个表单元素都具有 name 属性在提交数据前，可以使用下列API方法对数据进行查看和修改
文件上传
结合 FormData 实现头像上传
实现步骤：
1.主要的实现步骤： 2.使用文件选择器选择图片文件 3.把用户选择的文件存入 FormData 对象4.使用 axios 把 FormData 发送给服务器 5.模拟文件选择器的点击事件
图片上传服务器：
input标签的属性
文件域： accept 属性：控制能够选择的文件类型，比如 accept="image/png,image/jpeg" multiple 属性：控制是否可以多选文件
通俗的说，在 JavaScript 中，使用 文件对象 表示一个本地文件。 文件对象不需要自己创建，可以通过文件域获取得到 选择一个或多个文件 根据文件域，找到它的 files 属性。files属性是一个伪数组，里面包含了一个或多个文件对象
取得文件对象
文件对象作用之一
本地预览
文件对象的作用之二
追加到FormData，实现文件上传
请求报文 & 响应报文
什么是请求报文&响应报文
客户端与服务器通信的过程是基于请求与响应的。其中： 请求报文规定了客户端以什么格式把数据发送给服务器 响应报文规定了服务器以什么格式把数据响应给客户端
请求报文格式
请求报文由请求行（request line）、请求头部（ header ）、空行 和 请求体 4 个部分组成。图示如下
URL参数
在浏览器中，GET 请求比较特殊，它只有请求头，没有请求体。 在浏览器中，POST、PUT、PATCH、DELETE 请求既有请求头，又有请求体。
常用的5种请求方式，都可以在URL后面携带请求参数。 由于URL的长度有限制，所以请求参数一般都比较小，比如不能做文件上传 常用的请求参数有两种写法 /api/xxx?参数=值&参数=值 （这种格式的字符串叫做查询字符串，所以这样的参数叫做查询参数） /api/xxx/值/值 （Restful 风格的接口用这种格式的参数
axios中 如何携带不同格式的请求参数
第一种格式的参数：（/api/xxx?参数=值&参数=值）
第二种格式的参数：（ /api/xxx/值/值）
请求体
1.除GET请求以外，其他4种常用的请求方式，都可以设置请求体。
参数=值&参数=值 （查询字符串格式）
2.请求体的大小没有限制，所以可以提交大量的数据
'{ "id": 1, "name": "zs" }' （JSON格式）
3.常用的请求体格式有如下三种：
new FormData() （FormData对象格式）
请求的时候，设置了不同格式的请求体，需要一个对应的请求头
响应报文
http 响应状态码
概念：http 响应状态码（Status Code）由三位数字组成，用来标识响应成功与否的状态。 作用：客户端浏览器根据响应状态码，即可判断出这次 http 请求是成功还是失败了
| 状态码 | 状态码描述 | 说明 |
|---|---|---|
| 200 | OK | 请求成功。 |
| 201 | Created | 资源在服务器端已成功创建。 |
| 304 | Not Modified | 资源在客户端被缓存，响应体中不包含任何资源内容！ |
| 400 | Bad Request | 客户端的请求方式、或请求参数有误导致的请求失败！ |
| 401 | Unauthorized | 客户端的用户身份认证未通过，导致的此次请求失败！ |
| 404 | Not Found | 客户端请求的资源地址错误，导致服务器无法找到资源！ |
| 500 | Internal Server Error | 服务器内部错误，导致的本次请求失败！ |
http 响应状态码 Vs 业务状态码
- 所处的位置不同： 在响应头的状态行中所包含的状态码，或者请求列表中的Status，叫做“响应状态码”
在响应体的数据中所包含的状态码（案例中叫做code），叫做“业务状态码”
- 表示的结果不同： 响应状态码只能表示这次请求的成功与否（成功地失败了） 业务状态码用来表示这次业务处理的成功与否
- 通用性不同： 响应状态码是由 http 协议规定的，具有通用性。每个不同的状态码都有其标准的含义，不能乱用。 业务状态码是后端程序员自定义的，不具有通用性
