10.22.Ajaxday2 ，3表单&文件上传

一、表单

二、文件上传

三、案例-图书管理

四、axios请求方法的别名

---

一

1、form表单的作用

        提交数据给服务器

2、属性

        method：方法

        action：提交的接口URL地址

<!-- get属性提交可以看到用户名和密码 -->
  <form action="http://www.liulongbin.top:3009/api/form" method="post">
    <div>
      <!-- 用户名 -->
      <span>用户名：</span>
      <input type="text" name="username">
    </div>
    <div>
      <!-- 密码： -->
      <span>登录密码：</span>
      <input type="password" name="password">
    </div>
    <div>
      <!-- 提交按钮 -->
      <button>提交</button>
    </div>
  </form>

3.表单提交的问题

        表单默认提交行为会导致页面跳转

        所以表单只负责采集数据，通过Ajax提交数据给服务器

<script src="./lib/axios.js"></script>
  <script>
    // 请求方式 POST
    // 地址 http://www.liulongbin.top:3009/api/login
    // 参数:  username 用户名     password  密码

    // 使用Ajax提交表单数据的步骤
    //  1. 监听表单的 submit 提交事件
    //  2. 阻止默认提交行为
    //  3. 基于 axios 发起请求
    //  4. 指定请求方式、请求地址、指定请求体数据
    document.querySelector('form').addEventListener('submit',function(e){
      e.preventDefault()
      let username=document.querySelector('#username').value
      let password=document.querySelector('#password').value
      // 3.
      axios({
        method:'post',
        url:'http://www.liulongbin.top:3009/api/login',
        data:{
          username,
          password
        }
      }).then(({data:res})=>{
        console.log(res)
      })
    })
  </script>

4.serialrize插件

        把form数据序列化

 document.querySelector('form').addEventListener('submit',function(e){
      e.preventDefault()
      
      let data=serialize(this,{hash:true})
      console.log(data)
      
      axios({
        method:'post',
        url:'http://www.liulongbin.top:3009/api/login',
        data

      }).then(({data:res})=>{console.log(res)})
    })

---

二

1.FormData

        概念：浏览器提供的一个WEBAPI，以键值对的方式存储数据

        应用场景：FormData+Ajax实现文件上传的功能

        FormData实质是一个构造函数

 let fd=new FormData()
    fd.append('name',"张三")
    fd.append('age',"19")
    
    //改forEach区别于数组的forEach 第一个输出的是值，第二个是键
    fd.forEach((a,b)=>{console.log(a,b)})

        上传文件

let fd=new FormData()
    fd.append('name',"张三")
    fd.append('age',"19")
    
    iptFile.addEventListener('change',function(){
      // console.log(this.files)
      console.log(this.files[0])
      fd.append('photo',this.files[0])
    })

---

三

请求体数据类型

属性值	应用场景
application/x-www-form-unlencoded	表单中不包含文件上传的场景，适用于普通数据的提交
multipart/form-data	表单中包含上传文件的场景
application/json	上传json格式数据

注意：不同的数据对应不同的请求类型，axios默认设置了数据

---

四

axios.get(url[,config])   axios.get('url',config)

axios.delete(url[,config])

axios.post(url[,data[,config]])//  axios.post(url,data,config)

axios.put(url[,data[,config]])

axios.patch(url[,data[,config]])

[]代表可以省略,config配置对象，

 2.全局配置请求根路径

        axios.defaults.baseURL='请求根路径'