form-serialize详解

最新推荐文章于 2024-09-16 21:59:14 发布

前端榴莲

最新推荐文章于 2024-09-16 21:59:14 发布

阅读量1.1k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/lllcuigu/article/details/133675320

版权

使用form-serialize库获取整体表单数据

如果一套表单里有很多很多表单元素，如何一次性快速收集出来呢？

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

form-serialize 插件语法：

引入 form-serialize 插件到自己网页中

使用 serialize 函数

参数1：要获取的 form 表单标签对象（要求表单元素需要有 name 属性-用来作为收集的数据中属性名）

参数2：配置对象

hash：

true - 收集出来的是一个 JS 对象结构

false - 收集出来的是一个查询字符串格式

empty：

true - 收集空值

false - 不收集空值

需求：收集登录所需的账号和密码

<!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>
  <!-- 
    目标：在点击提交时，使用form-serialize插件，快速收集表单元素值
    1. 把插件引入到自己网页中
  -->
  <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>