一、form 表单提交数据

      1、三个专属属性：
           action-接口的url地址、
           method-get或者post、
           enctype-属性指定数据的编码方式为 application/x-www-form-urlencoded（默认值）-只能搭配post一起使用

       2、必须设置name属性，值必须和接口的参数名字一致

 <form
      class="card-body bg-light"
      id="addForm"
      method="POST"
      action="http://www.itcbc.com:3006/api/addbook"
      enctype="application/x-www-form-urlencoded"
    >

二、jQuery的serializez()函数

      1、$("表单元素的选择器").serialize()
       2、每个表单域必须添加name属性，name属性的值必须和后退接口的参数名称一致，不然无法识别
       3、获取的结果是字符串结果：name=value&name=value
       4、不能完成文件上传、不能得到禁用状态的值
       5、可以获取隐藏域的值

 let btnadd = document.querySelector('.btnadd')

      btnadd.addEventListener('click', function() {
        // 语法：$('表单选择器').serialize()
        // 作用：可以收集指定表单中  拥有name属性(还要有属性值)的表单元素的value值，生成key=value&key=value这种格式
        // 细节
        // 1.表单元素一定要有name属性，name属性的值就是参数的键
        // 2.这种方式不能获取文件域的值
        // 3.name属性的值一定要和后台接口的参数名称一致
        console.log($('#addForm').serialize())

        axios({
          url: 'http://www.itcbc.com:3006/api/addbook',
          method: 'post',
          data: $('#addForm').serialize()
        }).then(function(res) {
          console.log(res)
        })
      })

三、formdata的基本使用

     1、获取表单》创建一个formdada》将formdada转换为对象
     2、上传文件不要转换类型

  let btnadd = document.querySelector('.btnadd')
      btnadd.addEventListener('click', function() {
        // 收集数据
        // 1.获取当前form表单
        let myform = document.querySelector('#addForm')
        // 2.创建一个formdata,传入指定的表单
        let formdata = new FormData(myform)
        // 3.将formdata转换为对象
        let obj = {}
        formdata.forEach(function(value, key) {
          obj[key] = value
        })
        
        axios({
          url: 'http://www.itcbc.com:3006/api/addbook',
          method: 'post',
          // data:{},
          // data:'key=value&key=value'
          data: obj
        }).then(res => {
          console.log(res)
        })
      })

四、files 只上传文件数据

    1、对于文件域，当用户选择好文件之后，会触发change（input）事件
         当前用户所选择的文件列表，里面的每一个成员都是file对象，伪数组

 let iptFile = document.querySelector('#iptFile')
      let form = document.querySelector('form')

      iptFile.addEventListener('change', function() {
        // files:当前用户所选择的文件列表,里面的每一个成员都是File对象
        console.log(iptFile.files[0])

        let formdata = new FormData()
        // 在formdata中追加文件参数
        // formdata.append(后台要求的参数key,文件对象)
        formdata.append('avatar', iptFile.files[0])

        axios({
          url: 'http://www.itcbc.com:3006/api/formdata',
          method: 'POST',
          data: formdata
        }).then(res => {
          console.log(res)
        })
      })

五、预览效果

 let iptFile = document.querySelector('#iptFile')
      let thumb = document.querySelector('.thumb')
      // 对于文件域，当用户选择好文件之后，会触发change(input)事件
      iptFile.addEventListener('change', function() {
        let myform = document.querySelector('form')
        let formdata = new FormData(myform)
        console.log(formdata.get('avatar'))

        // 实现文件预览--本地预览：与服务器没有关系
        // 1.获取当前的文件对象：formdata.get('avatar')
        // 2.通过文件对象创建一个对应的地址：
        // createObjectURL:将文件对象存储到内存，并返回内存的地址
        let myurl = URL.createObjectURL(formdata.get('avatar'))
        // 3.将地址赋值给img标签的src属性
        thumb.src = myurl

        axios({
          url: 'http://www.itcbc.com:3006/api/formdata',
          method: 'POST',
          data: formdata
        }).then(res => {
          console.log(res)
        })
      })