Javascript：form-serialize插件

最新推荐文章于 2024-10-09 09:22:37 发布

听海边涛声

最新推荐文章于 2024-10-09 09:22:37 发布

阅读量689

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/panghuangang/article/details/140321686

版权

说明

form-serialize插件的作用：快速收集表单元素的值。

语法：

const form = document.querySelector('.example-form')
// 第一个参数传表单对象
const data = serialize(form,
  // 第二个参数传一个配置对象
  {
    hash: true,
    empty: true
  })

参数1：要获取哪个表单的数据

表单元素需要设置name属性，它的值会作为serialize函数返回的对象的属性名。
name属性的值建议和接口文档的参数名一致。

参数2：配置对象

hash：设置获取数据结构，true：返回的js对象，false：返回的是查询字符串。实际开发中推荐设置为true。因为获取到的参数一般在请求体里提交给服务器
empty：设置是否获取空值。 true：空值也获取，false：不获取空值。实际开发中推荐设置为true，保证数据结构和标签的结构一致。

返回值：返回的data是一个对象，类似下面的样式：

{
  username: '55eefffdf',
  password: '123456'
}

form-serialize插件的官网：
https://github.com/defunctzombie/form-serialize#readme
在这里插入图片描述

示例

示例：配置对象中hash的值为true，返回的是js对象

<!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>13.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插件，快速收集表单元素值
  -->
  <!-- 引入form-serialize插件 -->
  <script src="./lib/form-serialize.js"></script>
  <script>
    document.querySelector('.btn').addEventListener('click', () => {
      // 使用serialize函数快速收集表单元素的值
      // 参数1：要获取哪个表单的数据
      // 表单元素需要设置name属性，它的值会作为对象的属性名
      // name属性的值建议和接口文档的参数名一致
      // 参数2：配置对象
      // hash：设置获取数据结构，true：返回的js对象
      // empty：设置是否获取空值
      const form = document.querySelector('.example-form')
      const data = serialize(form, { hash: true, empty: true })
      console.log(data)
    })
  </script>
</body>

</html>

在这里插入图片描述

配置对象中hash的值为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>13.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插件，快速收集表单元素值
  -->
  <!-- 引入form-serialize插件 -->
  <script src="./lib/form-serialize.js"></script>
  <script>
    document.querySelector('.btn').addEventListener('click', () => {
      // 使用serialize函数快速收集表单元素的值
      // 参数1：要获取哪个表单的数据
      // 表单元素需要设置name属性，它的值会作为对象的属性名
      // name属性的值建议和接口文档的参数名一致
      // 参数2：配置对象
      // hash：设置获取数据结构，true：返回的js对象, false：返回的是查询字符串
      // empty：设置是否获取空值
      const form = document.querySelector('.example-form')
      const data = serialize(form, { hash: false, empty: true })
      console.log(data)
    })
  </script>
</body>

</html>

在这里插入图片描述

示例：配置对象中empty的值为true，空值也获取了

<!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>13.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插件，快速收集表单元素值
  -->
  <!-- 引入form-serialize插件 -->
  <script src="./lib/form-serialize.js"></script>
  <script>
    document.querySelector('.btn').addEventListener('click', () => {
      // 使用serialize函数快速收集表单元素的值
      // 参数1：要获取哪个表单的数据
      // 表单元素需要设置name属性，它的值会作为对象的属性名
      // name属性的值建议和接口文档的参数名一致
      // 参数2：配置对象
      // hash：设置获取数据结构，true：返回的js对象(推荐),一般在请求体里提交给服务器
      //  false：返回的是查询字符串
      // empty：设置是否获取空值
      const form = document.querySelector('.example-form')
      const data = serialize(form, { hash: true, empty: true })
      console.log(data)
    })
  </script>
</body>

</html>

在这里插入图片描述

示例：配置对象中empty的值为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>13.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插件，快速收集表单元素值
  -->
  <!-- 引入form-serialize插件 -->
  <script src="./lib/form-serialize.js"></script>
  <script>
    document.querySelector('.btn').addEventListener('click', () => {
      // 使用serialize函数快速收集表单元素的值
      // 参数1：要获取哪个表单的数据
      // 表单元素需要设置name属性，它的值会作为对象的属性名
      // name属性的值建议和接口文档的参数名一致
      // 参数2：配置对象
      // hash：设置获取数据结构，true：返回的js对象(推荐),一般在请求体里提交给服务器
      //  false：返回的是查询字符串
      // empty：设置是否获取空值
      const form = document.querySelector('.example-form')
      const data = serialize(form, { hash: true, empty: false })
      console.log(data)
    })
  </script>
</body>

</html>

在这里插入图片描述