form 表单 & 文件上传： 一.form 表单：
在网页中，表单主要负责数据采集功能 三个部分组成，分别是：表单标签、表单域、表单按钮 HTML 的 就是表单标签，它是一个“容器”，用来将页面上指定的区域划定为表单区域： 表单域提供了采集用户信息的渠道，常见的表单域有：input、textarea、select 等。 当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器。
图书管理确认框： // 判断用户是否确定删除 if (!confirm("您确定删除吗")) { // 不删除 return; // 不再往下执行代码 }
快速获取表单 ：
<form class="f1">
<input value="111" type="text" name="username" />
<input value="222" type="text" name="password" />
<input value="333" type="text" name="address" />
<input value="444" type="text" name="phone" />
<input type="text" />
<input type="text" />
<input type="text" />
<button type="button">注册数据</button>
</form>
<form class="f2" action="">
<input type="text" name="nickname" value="aabbcc" />
</form>
<script>
// 获取表单1 数据 对象格式
const obj1 = getForm('.f1');
// 获取表单2 数据 对象格式
const obj2 = getForm('.f2');
console.log(obj1);
console.log(obj2);
// query 只能传入 form标签的选择器
function getForm(query) { // 在定义函数的时候写形参 - 名字都可以随意改
const inputs = document.querySelectorAll(query + ' input[name]');
// const inputs = document.querySelectorAll('.f1 input[name]');
const obj = {};
inputs.forEach((dom) => {
obj[dom.name] = dom.value;
});
return obj;
}
</script>
通过 Ajax 提交表单数据： 通过 Ajax 提交表单采集到的数据，可以防止表单默认提交行为导致的页面跳转问题，提高用户的体验。
监听表单的 submit 提交事件 阻止默认提交行为 基于 axios 发起请求 指定请求方式、请求地址 指定请求体数据
<script>
$('form').on('submit', function (e) {
e.preventDefault()
axios({
method: 'POST',
url: 'http://www.itcbc.com:3006/api/form',
data: {
username: $('[name="username"]').val(),
password: $('[name="password"]').val()
}
}).then(result => {
console.log(result.data)
})
})
</script>
jQuery 的 serialize() 函数：
jQuery 的 serialize() 函数能够一次性获取到表单中采集的数据，它的语法格式如下：
$('表单元素的选择器').serialize();
<script>
$('form').on('submit', function (e) {
e.preventDefault()
axios({
method: 'POST',
url: 'http://www.itcbc.com:3006/api/form',
data: $('form').serialize() //$('表单元素的选择器').serialize();
}).then(result => {
console.log(result.data)
})
})
</script>
serialize() 函数的使用注意点：
在使用 serialize() 函数快速获取表单数据时，必须为每个表单域添加 name 属性！
例如下面的示例中，只能通过 serialize() 函数获取到密码的值：
<form>
<!-- 把所有的框框、按钮都放这里面 -->
<!-- 没有name属性 -->
<input type="text" /><br />
<input type="password" name="password" /><br />
<button>提交</button>
</form>
<script>
$('form').serialize(); // password=123
</script>
serialize() 函数的其他特点：
该方法是jQuery封装的，使用时必须引入jQuery 使用serialize()，各表单域必须有 name 属性 使用该方法得到的结果是一个查询字符串结构：name=value&name=value 该方法 能够 获取 隐藏域的值 该方法不能得到禁用状态的值 该方法不能得到文件域中的文件信息，所以不能完成文件上传
二.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
data:表示提交到服务器的数据 config:相当于传递给 axios()的那个对象 体验 axios.get() 的用法: 使用 axios.get() 可以方便快捷地发起 GET 请求 => { console.log(result); }) // 带查询参数 axios.get('www.itcbc.com:3006/api/get', { params: { id: 1 } }).then(result => { console.log(result); })
体验 axios.post() 的用法: 使用 axios.post() 可以方便快捷地发起 POST 请求： => { console.log(result); }) // 带请求体 axios.post('www.itcbc.com:3006/api/post', { username: 'zhangsan', password: '123456' }).then(result => { console.log(result); })
三.axios 全局配置 和 拦截器： 全局配置请求根路径: 在 url 地址中，协议://域名:端口 对应的部分叫做“请求根路径” 全局配置请求根路径的好处：
提高项目的可维护性。全局配置根路径后，后续所有的请求都可以使用全局配置的根路径
假设：端口号从 3009 变成了 3006:
没有全局配置根路径，则每个请求的URL中的端口号都需要被修改！ 有全局配置根路径，则只需要修改全局配置即可
基于 axios 提供的固定配置，即可轻松配置请求的根路径。语法格式如下： axios.defaults.baseURL = '请求根路径'
拦截器: 拦截器（interceptors）用来全局拦截 axios 的每一次请求与响应。 好处：可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性。
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
</script>
四.FormData和文件上传： FormData基本使用方法:
假设需要收集 …… 里面的所有表单项的值 要求，每个表单元素都具有 name 属性
<script>
// 1. 获取 form 标签的 DOM对象
let form = document.querySelector('form');
// 2. 实例化 FormData 对象，传入 form
let fd = new FormData(form);
// 3. 提交数据
axios.post('/api/formdata', fd).then(result => {
console.log(result);
})
</script>
注意事项：提交 FormData 对象，不能使用 GET 方式，具体以接口文档为准 FormData的API方法: 在提交数据前，可以使用下列API方法对数据进行查看和修改
<script>
append('key', 'value'); --向对象中追加数据
set('key', 'value'); --修改对象中的数据
delete ('key'); --从对象中删除数据
get('key')-- 获取指定key的一项数据
getAll('key')-- 获取指定key的全部数据
forEach()-- 遍历对象中的数据
</script>
FormData和serialize的区别: 共同点:
都需要设置表单各项的name属性。 都能快速收集表单数据 都能够获取到隐藏域（）的值 都不能获取禁用状态（disabled）的值
不同点：
FormData属于原生的代码；serialiaze是jQuery封装的方法 FormData可以收集文件域（）的值，而serialize不能。如果有文件上传，则必须使用FormData。 得到的结果的数据类型不一样（知道即可）
<script>
$('#iptFile').on('change', function (e) {
let form = $('form')[0]; // 需要将jQuery对象转成DOM对象
const fd = new FormData(form);
// 提交FormData，从而完成文件上传
axios.post('http://www.itcbc.com:3006/api/formdata', fd).then(result => {
console.log(result.data);
})
})
</script>
五.文件域补充： 实现文件上传：
<input type="file" accept="image/*">
<script>
const input = document.querySelector("input ")
// 文件域内容改变的时候，获取文件列表及文件对象
input.addEventListener("change", function () {
// 获取某个文件对象，比如第一个文件的文件对象
const file = this.files[0]
// 追加到FormData对象中
const formdata = new FormData()
formdata.append("avatar", file)
// axios 提交 fd 到指定的接口，从而实现文件上传
// axios提交FormData的代码
axios({
type: 'post',
url: 'http://www.itcbc.com:3006/api/formdata',
data: formdata,
success(result) {
console.log(result);
}
})
})
</script>
六.请求报文 & 响应报文： 客户端与服务器通信的过程是基于请求与响应的。其中：
请求报文规定了客户端以什么格式把数据发送给服务器 响应报文规定了服务器以什么格式把数据响应给客户端
请求报文 - 格式: 请求报文由请求行（request line）、请求头部（ header ）、空行 和 请求体 4 个部分组成。
在浏览器中，GET 请求比较特殊，它只有请求头，没有请求体。 在浏览器中，POST、PUT、PATCH、DELETE 请求既有请求头，又有请求体。
响应报文 - 格式: 响应报文由状态行 、响应头部、空行 和 响应体 4 个部分组成。 URL参数:
常用的5种请求方式，都可以在URL后面携带请求参数。 由于URL的长度有限制，所以请求参数一般都比较小，比如不能做文件上传
常用的请求参数有两种写法:
/api/xxx?参数=值&参数=值 （这种格式的字符串叫做查询字符串，所以这样的参数叫做查询参数） /api/xxx/值/值 （Restful 风格的接口用这种格式的参数）
第一种格式的参数：（/api/xxx?参数=值&参数=值）
<script>
// 直接写成查询字符串，并拼接到url后面
axios.get('/api/xxx?key=value&key=value')
// 按照axios的语法写，axios会帮我们转成查询字符串
axios.get('api/xxx', { params: { key: value, key: value } })
</script>
第二种格式的参数：（ /api/xxx/值/值）
<script>
// 只能自己拼接
axios.get('/api/xxx/100/zhangsan')
</script>
请求体:
除GET请求以外，其他4种常用的请求方式，都可以设置请求体。
请求体的大小没有限制，所以可以提交大量的数据
常用的请求体格式有如下三种：
参数=值&参数=值 （查询字符串格式）
<script>
// axios.post的第二个参数，直接用查询字符串
axios.post('/api/xxx', 'key=value&key=value')
</script>
'{ "id": 1, "name": "zs" }' （JSON格式）
<script>
// axios.post的第二个参数，使用对象。axios会将它转成JSON格式
axios.post('/api/xxx', { id: 1, name: 'zs' })
</script>
new FormData() （FormData对象格式）
<script>
let fd = new FormData();
// axios.post的第二个参数，直接使用 FormData 对象
axios.post('/api/formdata', fd)
</script>
所处的位置不同：
在响应头的状态行中所包含的状态码，或者请求列表中的Status，叫做“响应状态码” 在响应体的数据中所包含的状态码（案例中叫做code），叫做“业务状态码”
表示的结果不同：
响应状态码只能表示这次请求的成功与否（成功地失败了） 业务状态码用来表示这次业务处理的成功与否
通用性不同：
响应状态码是由 http 协议规定的，具有通用性。每个不同的状态码都有其标准的含义，不能乱用。 业务状态码是后端程序员自定义的，不具有通用性。
响应状态码：
2xx 成功。 3xx 重定向。 4xx 客户端错误。 5xx 服务器错误。
业务状态码：
看是怎么命名的
