收集表单插件form-serialize

最新推荐文章于 2024-07-10 15:10:19 发布

xue0305

最新推荐文章于 2024-07-10 15:10:19 发布

阅读量238

点赞数 9

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/xyymyy/article/details/139474768

版权

收集表单插件form-serialize

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

使用 serialize 函数

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

参数2：配置对象

hash：
- true - 收集出来的是一个 JS 对象结构
- false - 收集出来的是一个查询字符串格式

empty：

true - 收集空值

false - 不收集空值

<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 })
      console.log(data)
    })
  </script>
</body>
</html>