form-serialize插件(快速收集表单元素值)

如何使用 form-serialize 插件,快速收集目标表单范围内表单元素的值?

  1. 我们前面收集表单元素的值,是一个个标签获取的
    form-serialize插件(快速收集表单元素值)_第1张图片

  2. 如果一套表单里有很多很多表单元素,如何一次性快速收集出来呢?
    form-serialize插件(快速收集表单元素值)_第2张图片

  3. 使用 form-serialize 插件提供的 serialize 函数就可以办到

  4. form-serialize 插件语法:

    1. 引入 form-serialize 插件到自己网页中
    2. 使用 serialize 函数
      • 参数1:要获取的 form 表单标签对象(要求表单元素有 name 属性 - 用来作为收集的数据中属性名)
      • 参数2:配置对象
        • hash:
          • true - 收集出来的是一个 JS 对象结构
          • false - 收集出来的是一个查询字符串格式
        • empty:
          • true - 收集空值
          • false - 不收集空值
  5. 需求:收集登录表单里的用户名和密码

  6. 对应代码:

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>form-serialize插件使用title>
head>

<body>
  <form action="javascript:;" class="example-form">
    <input type="text" name="username">
    <br>
    <input type="text" name="password">
    <br>
    <input type="button" class="btn" value="提交">
  form>
  
  <script src="./lib/form-serialize.js">script>
  <script>
    document.querySelector('.btn').addEventListener('click', () => {
      /**
       * 2. 使用serialize函数,快速收集表单元素的值
       * 参数1:要获取哪个表单的数据
       *  表单元素设置name属性,值会作为对象的属性名
       *  建议name属性的值,最好和接口文档参数名一致
       * 参数2:配置对象
       *  hash 设置获取数据结构
       *    - true:JS对象(推荐)一般请求体里提交给服务器
       *    - false: 查询字符串
       *  empty 设置是否获取空值
       *    - true: 获取空值(推荐)数据结构和标签结构一致
       *    - false:不获取空值
      */
      const form = document.querySelector('.example-form')
      const data = serialize(form, { hash: true, empty: true })
      // const data = serialize(form, { hash: false, empty: true })
      // const data = serialize(form, { hash: true, empty: false })
      console.log(data)
    })
  script>
body>

html>

你可能感兴趣的:(javascript)