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

最新推荐文章于 2022-11-04 22:44:17 发布

zitongChen

最新推荐文章于 2022-11-04 22:44:17 发布

阅读量2.7k

点赞数

分类专栏： json 文章标签： ajax json

本文链接：https://blog.csdn.net/zitongChen/article/details/53055162

版权

json 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在捣鼓着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>