Form表单、form-serialize插件使用

Form表单、form-serialize插件使用

1、表单的三个组成部分

• 表单标签
  HTML 的 <form> 就是表单标签，它是一个“容器”，用来将页面上指定的区域划定为表单区域
• 表单域
  表单域提供了采集用户信息的渠道，常见的表单域有：input、textarea、select 等
  注意：每个表单域必须包含 name 属性，否则用户填写的信息无法被采集到！
• 表单按钮
  当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器
  注意：
  ① type=“submit” 表示提交按钮的意思
  ② type 属性的默认值就是 submit，因此 type=“submit” 可以省略不写

2、form表单的属性

• action
  指定提交的 URL 地址
• method
  指定提交的方式(GET/POST)，默认值为GET

3、表单提交的问题（默认提交行为）

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

解决方案：

• <form> 表单只负责采集数据；
• Ajax 负责将数据提交到服务器。（符合：职能单一的原则）
  ① 监听表单的 submit 提交事件
  ② 阻止默认提交行为
  ③ 基于 axios 发起请求
  ④ 指定请求方式、请求地址
  ⑤ 指定请求体数据

document.querySelector('form').addEventListener('submit', function (e) {
      // 2. 
      e.preventDefault()

      // 提交的时候，来获取
      let username = document.querySelector('#username').value
      let password = document.querySelector('#password').value

      // 3. 
      axios({
        method: 'post',
        url: 'http://www.xxxx/api/login',
        data: {
          username,
          password
        }
      }).then(({ data: res }) => {
        console.log(res)
      })
    })

4、form-serialize插件

序列化表单域以通过ajax提交表单
官网 https://www.npmjs.com/package/form-serialize

<script src="./lib/form-serialize.js"></script>
document.querySelector('form').addEventListener('submit', function (e) {
      // 2. 
      e.preventDefault()

      // 提交的时候，serialize插件来获取表单数据
      let data = serialize(this, {
        // {} 配置对象 hash 配置，可以将 收集到的表单数据是个js对象格式
        hash: true
      })
      console.log(data)

      // 3. 
      axios({
        method: 'post',
        url: 'http://www.xxxx/api/login',
        // 这个data不能省，否则没有提交数据给服务器
        data
        //相当于data:data; 同名可以省略...
      }).then(({ data: res }) => {
        console.log(res)
      })
    })