1、form表单

1.1 表单的三个组成部分

网页中采集数据的表单由三个部分组成，分别是：表单标签、表单域、表单按钮。

1.1.1 表单的三个组成部分 - 表单标签

HTML 的就是表单标签，它是一个“容器”，用来将页面上指定的区域划定为表单区域。

1.1.2 表单的三个组成部分 - 表单域

表单域提供了采集用户信息的渠道，常见的表单域有：input、textarea、select等。

1.1.3 表单的三个组成部分 - 表单按钮

当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器。

1.2 form标签的属性

form 标签最重要的 3 个属性分别是 action、method 和 enctype。

1.3 以 GET 方式提交表单数据

在 form 标签上，通过 action 属性指定提交的 URL 地址，通过 method 属性指定提交的方式为 GET：

注意：由于method属性的默认值就是GET，因此上述的method="GET" 可以被省略！

1.4 以 POST 方式提交表单数据

在 form 标签上，通过 action 属性指定提交的 URL 地址，通过 method 属性指定提交的方式为 POST，并通过 enctype 属性指定数据的编码方式为 application/x-www-form-urlencoded

注意：由于 enctype 的默认值就是 application/x-www-form-urlencoded，因此上述的 enctype 可以被省略！

1.5 表单提交的问题

form 表单既负责采集数据，又负责把数据提交到服务器！表单的默认提交行为会导致页面的跳转。

解决方案：

form 表单只负责采集数据；

Ajax 负责将数据提交到服务器。（符合：职能单一的原则）

1.6 通过 Ajax 提交表单数据

通过 Ajax 提交表单采集到的数据，可以防止表单默认提交行为导致的页面跳转问题，提高用户的体验。
- 1. 监听表单的 submit 提交事件
- 1. 阻止默认提交行为
- 1. 基于 axios 发起请求
- 1. 指定请求方式、请求地址
- 1. 指定请求体数据

axios({
          url: 'http://www.itcbc.com:3006/api/addbook',
          method: 'post',
          data: {
            bookname: bookname.value,
            author: author.value,
            publisher: publisher.value
          }
        }).then(result => {
        })
})

1.7 jQuery 的 serialize() 函数

jQuery 的 serialize() 函数能够一次性获取到表单中采集的数据
- 1、作用：收集指定表单中有name属性的表单元素的value值
- 2、生成的格式为：key=value&key=value...
- 3、问题:
  - 3.1 jq的方法，需要引入外部资源
  - 3.2 jq元素获取文件数据
- 4、细节：name属性的值需要和后台接口的参数对应
- 5、其他特点：
  - 5.1 该方法能够获取隐藏域的值
  - 5.2 该方法不能得到禁用状态的值
  - 5.3 该方法不能得到文件域中的文件信息，所以不能完成文件上传
语法格式如下：

$('表单元素的选择器').serialize();

示例代码如下：

$('form').on('submit', function (e) {
    e.preventDefault()
    axios({
        method: 'POST',
        url: 'http://www.itcbc.com:3006/api/form',
        data: $('form').serialize()
    }).then(result => {
        console.log(result.data)
    })
})

2、axios 请求方法的别名

在实际开发中，常用的 5 种请求方式分别是： GET、POST、PUT、PATCH、DELETE

2.1 axios.get() 的用法

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

// 不带查询参数
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);
})

2.2 axios.post() 的用法

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

// 不带请求体
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);
}

3、axios 全局配置 & 拦截器

3.1 全局配置请求根路径

3.1.1 在 url 地址中，协议://域名:端口 对应的部分叫做“请求根路径”。
3.1.2 全局配置请求根路径的好处：
- 提高项目的可维护性。全局配置根路径后，后续所有的请求都可以使用全局配置的根路径
3.1.3 假设：端口号从 3009 变成了 3006
- 没有全局配置根路径，则每个请求的URL中的端口号都需要被修改！
- 有全局配置根路径，则只需要修改全局配置即可

3.2 全局配置请求根路径 - 语法格式

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

3.3 什么是拦截器

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

4、FormData

4.1 FormData 介绍

4.1.1 FormData 作用
- 收集常规的表单元素的数据
- 收集文件数据，只有formdata可以实现
4.1.2 axios所支持的参数格式
- key=value&key=value
- {key:value,key1:value1}
- formdata
4.1.3 收集常规表单元素的数据
- 要求表单元素一定要有name属性，name属性的值就是参数的键名
- 收集过程：
  - 获取表单dom对象
  - let formdata = new FormData(表单dom对象)
4.1.4 重点说明
- 理论上axios支持传递formdata
- 但是后台往往不会以formdata参数格式进行常规的业务处理，后台只有在有文件数据参与的时候接收formdata数据
- 结论：能不能传递formdata由后台接口的处理方式来决定

4.2 FormData的API方法

在提交数据前，可以使用下列API方法对数据进行查看和修改

append('key', 'value'); -- 向对象中追加数据
set('key', 'value');    -- 修改对象中的数据
delete ('key');         -- 从对象中删除数据
get('key')              -- 获取指定key的一项数据
getAll('key')           -- 获取指定key的全部数据
forEach()               -- 遍历对象中的数据

4.3 FormData和serialize的区别

共同点：
- 都需要设置表单各项的name属性。
- 都能快速收集表单数据
- 都能够获取到隐藏域（<input type="hidden" />）的值
- 都不能获取禁用状态（disabled）的值
不同点：
- FormData属于原生的代码；serialiaze是jQuery封装的方法
- FormData可以收集文件域（<input type="file"/>）的值，而serialize不能。如果有文件上传，则必须使用FormData。
- 得到的结果的数据类型不一样（知道即可）

4.4 FormData 实现头像上传

主要的实现步骤：
- 使用文件选择器选择图片文件
- 把用户选择的文件存入 FormData 对象
- 使用 axios 把 FormData 发送给服务器
- 模拟文件选择器的点击事件

<script>
let iptFile = document.querySelector('#iptFile')
let img = document.querySelector('img')
// 当用户选择完文件之后触发事件
iptFile.addEventListener('change', function() {
    // 使用axios结合formdata实现文件上传
    let form = document.querySelector('form')
    let formdata = new FormData(form)
    axios({
      url: '/api/formdata',
      method: 'post',
      data: formdata
    }).then(res => {
      img.src = res.data.data.filename
    })
})
</script>

5、图片预览

5.1 本地预览

图片并不是单独进行上传的，意思就是说用户选择图片之后，并没有进行图片的上传，这个时候的预览和服务器是没有任何关系

<script>
let iptFile = document.querySelector('#iptFile')
let thumb = document.querySelector('.thumb')
  // 当用户选择完文件之后触发事件
iptFile.addEventListener('change', function() {
    // 使用axios结合formdata实现文件上传
    let form = document.querySelector('form')
    let formdata = new FormData(form)

    // 实现本地预览：加载本地图片的数据进行渲染
    // 1.获取用户所选择的文件对象
    // files:当前用户所选择的文件列表
    let myfile = iptFile.files[0]
    // 2.根据用户所选择的文件对象生成一个路径并返回
    let myurl = URL.createObjectURL(myfile)
    // 3.将地址赋值给img标签的src属性
    thumb.src = myurl
})
</script>

6、文件上传

只要提交的数据中有文件，则必须使用formdata收集数据进行传递
将所有数据(包含文件)统一上传
```
let form = document.querySelector('form')
let formdata = new FormData(form)
```
- 实现图片的本地预览
  - 获取用户所选择的文件对象
```
file表单元素.files[0]
```
  - 根据文件对象生成一个托管路径
```
let url = URL.createObjectUrl(file对象)
```
  - 将路径赋值给img的src属性
```
img.src = url
```
  - 为什么要这么做？？？
    - 1、没有上传给服务器，所以也没有服务器返回路径
    - 2、我们也拿不到当前用户所选择的文件路径
    - 3、所以我们只能根据文件对象生成一个路径，并赋值给img的src属性

<script>
let iptFile = document.querySelector('#iptFile')
let thumb = document.querySelector('.thumb')
// 当用户选择完文件之后触发事件
iptFile.addEventListener('change', function() {
    // 使用axios结合formdata实现文件上传
    let form = document.querySelector('form')
    let formdata = new FormData(form)

    // 实现本地预览：加载本地图片的数据进行渲染
    // 1.获取用户所选择的文件对象
    // files:当前用户所选择的文件列表
    let myfile = iptFile.files[0]
    // 2.根据用户所选择的文件对象生成一个路径并返回
    let myurl = URL.createObjectURL(myfile)
    // 3.将地址赋值给img标签的src属性
    thumb.src = myurl
})
</script>

只上传文件数据
- 基本步骤
  - 1、获取文件对象
  - 2、创建formdata
  - 3、将文件对象做为参数追加到formdata中
    - formdata.append('后台接口规定的key',用户所选择文件对象)
  - 4、将formdata做为参数传递给后台服务器
- 预览
  - 将后台的返回路径赋值给img的src属性

<script>
let iptFile = document.querySelector('#iptFile')
  // 当用户选择完文件之后触发事件
iptFile.addEventListener('change', function() {
    // 使用axios结合formdata实现文件上传
    let formdata = new FormData()
    // 追加文件参数,可以追加任意的参数
    formdata.append('avatar', iptFile.files[0])
    axios({
      url: '/api/formdata',
      method: 'post',
      data: formdata
    }).then(res => {
      console.log(res)
    })
})
</script>

AJAX day2

1、form表单

1.1 表单的三个组成部分

1.1.1 表单的三个组成部分 - 表单标签

1.1.2 表单的三个组成部分 - 表单域

1.1.3 表单的三个组成部分 - 表单按钮

1.2 form标签的属性

1.3 以 GET 方式提交表单数据

1.4 以 POST 方式提交表单数据

1.5 表单提交的问题

1.6 通过 Ajax 提交表单数据

1.7 jQuery 的 serialize() 函数

2、axios 请求方法的别名

2.1 axios.get() 的用法

2.2 axios.post() 的用法

3、axios 全局配置 & 拦截器

3.1 全局配置请求根路径

3.2 全局配置请求根路径 - 语法格式

3.3 什么是拦截器

4、FormData

4.1 FormData 介绍

4.2 FormData的API方法

4.3 FormData和serialize的区别

4.4 FormData 实现头像上传

5、图片预览

5.1 本地预览

6、文件上传