首页 tools 前端

# form-serialize 插件

作用：快速收集表单元素的值

image-20230813085042213

这么多的用户填写的表单信息我们如果一个一个获取的话会很麻烦，可以使用 form-serialize 插件来完成。

# 语法：
// 获取表单对象
const form = ducment.querySelector('.example-form')
//serialize 函数 参数 1：指定获取哪个表单范围内的值传入表单对象，参数 2：传入配置对象
const data = serialize(form,{hash: true , empty: true})

image-20230813085338699

无论有多少个表单元素都可以快速的一步到位的全部收集出来。

<body>
    <form action="javaScript:;" class="form-data" method="POST">
        <input type="text" name="username" />
        <br>
        <input type="password" name="password" />
        <br>
        <input type="submit" class="btn" value="提交" />
    </form>
    <script type="text/javaScript" src="./js/form-serialize.js"></script>
    <script>
        document.querySelector('.btn').addEventListener('click', function () {
            // 使用 form-serialize 函数，快速收集表单元素值
            // 参数 1：要获取哪个表单的数据
            //      表单元素设置 name 属性，值会作为对象的属性名
            //      建议 name 属性的值，最好和接口文档参数名一致，否则后端接收不不到数据就会报错
            // 参数 2：配置对象
            //      hash: 设置获取数据结构
            //           -  true ：JSON 格式的 JS 对象数据
            //           -  false：查询字符串 url ？后面的
            //      empty: 设置是否获取空值
            const form = document.querySelector('.form-data')
            const data = serialize(form, { hash: false, empty: true })
            console.log(data)
        })
    </script>
</body>

效果：

test

# hash：参数的 true 跟 false 的区别

  • true ：JSON 格式的 JS 对象数据
  • false：查询字符串 url ？后面的
const data = serialize(form, { hash: true, empty: true })

结果：

image-20230815100345134

const data = serialize(form, { hash: false, empty: true })

结果：

image-20230815100416896