【ajax基础04】form-serialize插件

程序员微木

已于 2024-06-19 10:53:48 修改

阅读量563

点赞数 8

分类专栏： ajax 文章标签： ajax 前端 javascript

于 2024-06-19 10:52:14 首次发布

本文链接：https://blog.csdn.net/qq_67896626/article/details/139794088

版权

ajax 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一：form-serialize插件

作用：

语法格式：

一：form-serialize插件

作用：

快速且大量的收集表单元素的值

例如上图对于多表单元素的情形，单靠通过”选择器获取节点.value”值的形式，获取表单元素的值。在操作上、代码量上，非常的不简洁、且麻烦。form-serialize插件就很好的解决了这个问题

语法格式：

const form = document.querySelector('...要获取的表单元素')
serialize(form,{hash:true,empty:true})
//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>13.form-serialize插件使用</title>
</head>

<body>
    <form action="javascript:;" class="example-form">
        <input type="text" name="uname">
        <br>
        <input type="text" name="pwd">
        <br>
        <input type="button" class="btn" value="提交">
    </form>
    <!-- 
    目标：在点击提交时，使用form-serialize插件，快速收集表单元素值
  -->
    <!-- 1 将插件引入网页 -->
    <script src="./form-serialize.js"></script>
    <script>
        document.querySelector('.btn').addEventListener('click', () => {
            // 2 使用serialize函数，快速收集表单元素的值
            const form = document.querySelector('.example-form')
            const data = serialize(form, { hash: true, empty: true })
            console.log(data);
        })
    </script>
</body>

</html>