原生JS模拟jQuery中serializeArray获取表单数据

2020年09月22日作者:井井客来源:井井客整理

好长一段时间没弄jQuery的项目的,今天看文章的时候看到关于表单提交的点,然后自己动手写了一个非常简单的例子。

原生JS模拟jQuery中serializeArray获取表单数据

demo

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>原生JS获取表单数据</title>
    <style rel="stylesheet" type="text/css">
        html, body, form, ul, li {
            padding: 0;
            margin: 0;
            border: 0;
            list-style: none;
        }

        ul {
            width: 240px;
            border: 1px solid #e8e8e8;
            margin: 100px auto 0;
            padding: 10px 20px 20px;
        }

        li {
            margin-top: 10px;
        }

        textarea {
            resize: none;
        }
        .file {
            width: 180px;
        }
    </style>
</head>
<body>
<form id="myForm">
    <ul>
        <li><label>用户:</label><input type="text" value="" name="userName"/></li>
        <li>
            <label>性别:</label>
            <input type="radio" name="sex" value="male" id="sex-male"/><label for="sex-male">男士</label>
            <input type="radio" name="sex" value="female" id="sex-female"/><label for="sex-female">女士</label>
        </li>
        <li>
            <label>职业:</label>
            <select name="occupation">
                <option value="">请选择</option>
                <option value="1">公司职员</option>
                <option value="2">个体户</option>
            </select>
        </li>
        <li>
            <label>爱好:</label>
            <input type="checkbox" name="hobby" id="hobby01" value="1"/><label for="hobby01">读书</label>
            <input type="checkbox" name="hobby" id="hobby02" value="2"/><label for="hobby02">音乐</label>
            <input type="checkbox" name="hobby" id="hobby03" value="3"/><label for="hobby03">运动</label>
        </li>
        <li><label>备注:</label><textarea name="remark"></textarea></li>
        <li><label>文件:</label><input type="file" name="file" class="file" /></li>
        <li>
            <button type="reset">重置</button>
            <button type="submit" id="submit">提交</button>
        </li>
    </ul>
</form>
<script src="http://www.jingjingke.com/res/js/jquery.min.js"></script>
<script type="text/javascript">
    document.getElementById('submit').onclick = function () {
        let array = [];
        document.querySelectorAll('[name]').forEach(node => {
            if(['radio','checkbox'].includes(node.type.toLocaleLowerCase())){
                if(node.checked){
                    array.push({
                        name:node.getAttribute('name'),
                        value:node.value
                    })
                }
            }else if(node.type.toLocaleLowerCase()==='file'){
                if(node.files && node.files[0]){
                    array.push({
                        name:node.getAttribute('name'),
                        value:node.files[0]
                    })
                }
            }else{
                array.push({
                    name:node.getAttribute('name'),
                    value:node.value
                })
            }
        })
        // 模拟jQuery中的serializeArray方法结果
        console.log(array)
        return false;
    }
</script>
</body>
</html>

想说的话

其实没啥难度,只是想加深一下记忆。

jQuery中模拟表单提交可以使用serialize或者serializeArray方法,来获取该表单中的数据。

而现在因为大家都使用JS框架了,基本上都用数据绑定,获取数据相对容易很多。

但是原汁原味的表单,其实就是一个form标签内,有若干表单元素以及两个按钮(重置和提交)。

文章TAG:JavaScript

本文标题:原生JS模拟jQuery中serializeArray获取表单数据
本文链接:http://www.jingjingke.com/c/22370.html

上一篇:VUE组件第一次显示时再渲染
下一篇:webpack打包中css静态资源设置为相对路径