了解form表单的组成和特性

表单由三个部分组成： 1.表单标签（form） 2.表单域（input、textarea、select） 3.表单按钮（submit或者reset） 表单的作用是收集数据

 用户名： <input type="text" name="username"><br>
 密&emsp;码： <input type="text" name="password"><br>
 <input type="submit">
 <!-- button 的  type的属性默认值是submit 如果设置button 无法提交 -->
 <button type="button">按钮2</button>

重点：我们不用form 使用ajax提交然后收集数据

<script src ="./lib/axios.js></script>
  <script>
    document.querySelector('form').addEventListener('submit',function(e){
   e.preventDefault();
   axios({
   method:'post',
   url:'http://www.liulongbin.top:3009/api/form',
   data:{
     username:document.querySelector('[name="username"]').value
    password:document.querySelector('[name="password"]').value
   }
   }).then(({data:res})=>{
   console.log(res)
   })
    })
  </script>
   

即使使用ajax收集到我们想要的ajax数据 但是存在一个问题：如果需要收集多个数据多次使用xxxx:document.querySelector('[name="xxxxx"]').value 过程复杂

所以我们使用jQuery

举个例子：

<script>
   document.querySelector('form').addEventListener('submit',function(e){
    let str1 = $('form').serialize();
    console.log(str1);
    let str2 = $(this).serialize();
    console.log(str2);
    e.preventDefault();
    axios({
      method: 'post',
      url: 'http://www.liulongbin.top:3009/api/form',
      //data属性传递的值 如果是字符串 a=1&b=2&c=3
      //那么对应的enctype值 ：application/x-www-form-urlencoded

      data:str1
      //post请求参数几乎都是请求体参数 所以使用data属性
    }).then(({ data: res }) => {
      console.log(res);
    });
   }) 
  </script>

注意： 如果写成data:{str1} 那么 console.log(res);得到的是JOSN字符串格式 不符合 application/x-www-form-urlencoded 的格式