表单数组封装成Json对象数组

来源：互联网发布：java long占几个字节编辑：程序博客网时间：2024/05/16 18:05

最近在捣鼓着Json与ajax结合传递数据到后台。在这此前写过Gson处理前端传递过来的Json对象数组所以接着写一下如何把表单数组封装成Json对象。

场景：需要把表格中的表单转化为一个Json对象

我通过使用jQuery的相关方法实现表单数据的序列化，其中：
1.serialize( )方法是把表单内容序列化为一个字符串
格式：var data =$(“#form”).serialize();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"><html>  <head>    <title>test.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script src="jquery-3.1.1.min.js"></script>    <script type="text/javascript">    /*使用了jq的.serialize()    输出：username=tony&age=12&username=czt&age=22    */        function test(){            var data=$("#formId").serialize();            alert(data);        };    </script>  </head>  <body>    <form action="" id="formId" method="post">        姓名：<input type="text" name="username" value="tony"/>        年龄：<input type="text" name="age" value="12"/><br>        姓名：<input type="text" name="username" value="czt"/>        年龄：<input type="text" name="age" value="22"/><br>        <input type="submit" onclick="test()" value="提交">    </form>  </body></html>

2.serialzeArray( )是把表单序列化为一个Json结构的对象，而不是我们所想要的Json字符串
格式：var data=$(“#formId”).serializeArray( );

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"><html>  <head>    <title>test.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script src="jquery-3.1.1.min.js"></script>    <script type="text/javascript">        $.fn.serializeObject=function(){            var json={};            var map=this.serializeArray();            $.each(map,function(){                if(json[this.name]){                    if(!json[this.name].push){                        json[this.name]=[json[this.name]];                    }                    json[this.name].push(this.value ||'');                }else{                    json[this.name]=this.value||'';                }            });            return json;        };        function test(){            /*输出：            [{"name":"username","value":"tony"},{"name":"age","value":"12"},{"name":"username","value":"tony"},{"name":"age","value":"12"}]            这个方法输出的内容不是我们所想要的，所以我们要做写js功能对多得到的结果进行改造，为此我添加了**serializeObject( )**            */            var data=$("#formId").serializeArray();            var datastring=JSON.stringify(data);            alert(datastring);            /*改造后输出：{"username":["tony","czt"],"age":["12","22"]}，当我们得到这样的Json数据格式后，就可以传递给后台了。后台也可以根据这个Json解析，得到想要的信息*/            var jsonuserinfo=$("#formId").serializeObject();            alert(JSON.stringify(jsonuserinfo));        };    </script>  </head>  <body>    <form action="" id="formId" method="post">        姓名：<input type="text" name="username" value="tony"/>        年龄：<input type="text" name="age" value="12"/><br>        姓名：<input type="text" name="username" value="czt"/>        年龄：<input type="text" name="age" value="22"/><br>        <input type="submit" onclick="test()" value="提交">    </form>  </body></html>

通过上述的办法可以把表单封装到Json中并传递给后台。

0 0