将form表单序列化serializeArray() 转换成一个对象object

最新推荐文章于 2024-06-22 08:48:25 发布

王码农

最新推荐文章于 2024-06-22 08:48:25 发布

阅读量5.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： form表单转换成对象

本文链接：https://blog.youkuaiyun.com/qq_41993438/article/details/86671079

笔记专栏收录该内容

14 篇文章

订阅专栏

在前后端数据交互的时候，往往需要传递多个参数，这时候，form表单就给我们提供了一个很好的方法。
$("#formid").serializeArray()
serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）。
您可以选择一个或多个表单元素（比如 input 及/或 textarea），或者 form 元素本身。serializeArray() 方法序列化表单元素（类似 .serialize() 方法），返回 JSON 数据结构数据。

<form id="formId">
  <input type="text" name="username"/>
 <input type="text" name="password"/>
</form>

当执行serializeArray()方法时，它就会将input的name属性设置成键，input的value值设置的值（组成键值对），形成一个数组对象。将数据打包传递给后端。

不过这个方法有一个弊端，就是在传递数据的时候，如果对象中存在Date数据类型或者其他无法转换的类型的时候，后台接收数据会抛出异常，springBoot无法自动转换成对象属性。

这个时候，我们可以在前台，将其数组对象转换成对象，在后台用对象接收参数，就可以避免这个问题的发生。具体方法如下：

var trans={
    serialize:function(obj){
        var o ={};
        $.each(obj,function(){
            if(o[this.name]){
                if(!o[this.name].push){
                    o[this.name]=[o[this.name]];
                }
                o[this.name].push(this.value||"");
            }else {
                o[this.name] = this.value || "";
            }
        });
        return o;
    }
}

测试页面：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>
    <form id="formId">
        <label>账号： <input type="text" name="username"/> </label><br/>
        <label>密码：  <input type="text" name="password"/></label>
        <button type="button"onclick="transData()">提交</button>
    </form>

</div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">

    function transData(){
        var _data = ($("#formId").serializeArray());
        console.log(_data);
        _newData = trans.serialize( _data );
        console.log( _newData );
    }

    var trans={
        serialize:function(obj){
            var o ={};
            $.each(obj,function(){
                if(o[this.name]){
                    if(!o[this.name].push){
                        o[this.name]=[o[this.name]];
                    }
                    o[this.name].push(this.value||"");
                }else {
                    o[this.name] = this.value || "";
                }
            });
            return o;
        }
    }

</script>
</body>
</html>

结果如图：
在这里插入图片描述
这就可以避免后台接收数据时报异常的方法了！
这段代码非常实用，有不足的地方请自己改进吧！也可留言