form-serialize插件

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

^涵梦

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

阅读量1.2k

点赞数 4

文章标签： html5 javascript ajax jquery css css3

本文链接：https://blog.youkuaiyun.com/qq_54800157/article/details/132057497

版权

from-serialize.js文件提取

链接：https://pan.baidu.com/s/1zCdFsqgvWwxap4w3SCApFQ
提取码：ri9r

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
        <br>
        <input type="text" name="pwd">
        <br>
        <br>
        <input type="button" class="bth" value="提交">
    </form>
    <!--
        目标：在点击提交时，使用form-serialize插件，快速收集表单元素值
        1、把插件引入到自己网页中

    -->
    <script src="./lib/form-serialize.js"></script>
    <script>
        const bth=document.querySelector('.bth');
        bth.addEventListener('click',()=>{
       /**2、使用serialize函数，快速收集表单元素的值
        * 参数1：要获取哪个表单的数据
        * 参数2：配置对象
        * */
       const form=document.querySelector('.example-form');
       const data=serialize(form,{hash:true,empty:true})
       console.log(data);
        })
    </script>
</body>
</html>