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 请求

    <script>
        // 不带查询参数
        axios.get('http://www.itcbc.com:3006/api/get').then(result => {
            console.log(result);
        })
        // 带查询参数
        axios.get('http://www.itcbc.com:3006/api/get', {
            params: { id: 1 }
        }).then(result => {
            console.log(result);
        })
    </script>

体验 axios.post() 的用法:

使用 axios.post() 可以方便快捷地发起 POST 请求：

    <script>
        // 不带请求体
        axios.post('http://www.itcbc.com:3006/api/post').then(result => {
            console.log(result);
        })
        // 带请求体
        axios.post('http://www.itcbc.com:3006/api/post', {
            username: 'zhangsan',
            password: '123456'
        }).then(result => {
            console.log(result);
        })
    </script>

三.axios 全局配置和拦截器：

全局配置请求根路径:

在 url 地址中，协议://域名:端口对应的部分叫做“请求根路径”

全局配置请求根路径的好处：

提高项目的可维护性。全局配置根路径后，后续所有的请求都可以使用全局配置的根路径

假设：端口号从 3009 变成了 3006:

没有全局配置根路径，则每个请求的URL中的端口号都需要被修改！
有全局配置根路径，则只需要修改全局配置即可

基于 axios 提供的固定配置，即可轻松配置请求的根路径。语法格式如下： axios.defaults.baseURL = '请求根路径'

    <script>
        // 全局配置根路径
        axios.defaults.baseURL = 'http://www.itcbc.com:3006';
        // 请求接口时，不用写根路径
        axios.get('/api/get').then(result => {
            console.log(result);
        })
        // 请求接口时，不用写根路径
        axios.post('/api/post', { username: 'zhangsan', password: '123456' }).then(result => {
            console.log(result);
        })
    </script>

拦截器:

拦截器（interceptors）用来全局拦截 axios 的每一次请求与响应。 好处：可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性。

    <script>
        // 添加请求拦截器
        axios.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });

        // 添加响应拦截器
        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>

请求的时候，设置了不同格式的请求体，需要一个对应的请求头
- 第一种格式：参数=值&参数=值 ===> Content-Type: application/x-www-form-urlencoded
- 第二种格式： '{ "id": 1, "name": "zs" }' ===> Content-Type: application/json
- 第三种格式： new FormData() =====> Content-Type: multipart/form-data; xxsd随机字符

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 协议规定的，具有通用性。每个不同的状态码都有其标准的含义，不能乱用。
业务状态码是后端程序员自定义的，不具有通用性。

响应状态码：

2xx 成功。
3xx 重定向。
4xx 客户端错误。
5xx 服务器错误。

业务状态码：

0 表示成功；1 表示失败。
10 表示成功；20 表示失败。
4xxx 表示成功；9xxx 表示失败

来了第二天的啊贾克斯！！