前端如何获取from表单的数据

最新推荐文章于 2023-04-10 09:25:13 发布

小新大人y

最新推荐文章于 2023-04-10 09:25:13 发布

阅读量4.2k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_44885374/article/details/103583694

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

方法一：serialize()方法通过序列化表单值，创建URL编码文本字符串。
使用方法：$(selector).serialize()
你可以选择一个或者多个表单元素（比如：input及文本框textarea(多行文本框)）或者from元素本身。
方法二：serializeArray()方法序列化表单元素，（类似seaialize()方法），返回JSON数据结构数据
注意：对于上述两种方法，文件选择元素不会被序列化！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        form{
            margin: auto;
        }
        input{
            width: 200px;
            height: 40px;
            border: 1px solid black;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }
    </style>
    <script src="./jquery-3.4.1.min.js"></script>
</head>
<body>
<!--使用get方式传值，传输的数据会显示在浏览器的地址栏上，并且要给每一个要传输的数据加name名称，这个name名称指代的就是-->
<!--传过去的值的名称-->
<form action="" method="post">
    <input type="text" name="name" value="freely"><br>
    <input type="text" name="age" value="20"><br>
    <input type="text" name="city" value="beijing"><br>
    <input type="text" name="job" value="fe"><br>
    <input type="file" name="file">
</form>
<button id="serialize">send</button>

</body>
<script>
    console.log(window.location.href.split("?"));//使用get方式传值，从路径获取
    $(document).ready(function() {
        $('#serialize').on('click', function() {
            // 方法一 serialize  您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。
            //使用方法$(selector).serialize()
            var str = $('form').serialize();// 得到序列化字符串  注意：文件选择元素不会被序列化！
            console.log(str)// name=freely&age=20&city=beijing&job=fe
            getObj(str);
            // 方法二 serializeArray 注意：文件选择元素不会被序列化！
            //使用方法$(selector).serializeArray()
            // 您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。
            var arr = $('form').serializeArray();
            console.log(arr)
            // 得到数组对象
            /*
             0: {name: "name", value: "freely"}
             1: {name: "age", value: "20"}
             2: {name: "city", value: "beijing"}
             3: {name: "job", value: "fe"}
             */
            // 遍历数组得到 {name: 'freely', age: 20}数据格式
            // 使用jquery方法 $.each方法
            var tempObj = {};
            $.each(arr, function(i, obj) {
                tempObj[obj.name] = obj.value;
            });
            console.log(tempObj); // {name: "freely", age: "20", city: "beijing", job: "fe"}
        });
    });

    function getObj(str) {
        let arr = str.split('&');
        let obj = {};
        arr.map(function(item) {
            let tempArr = item.split('=');
            obj[tempArr[0]] = tempArr[1];
        });
        console.log(obj); // {name: "freely", age: "20", city: "beijing", job: "fe"}
    }
</script>
</html>