SpringMVC将表单对象序列化成Json字符串提交，以List接收

来源：互联网发布：网络借贷平台监管办法编辑：程序博客网时间：2024/05/16 10:16

HTML

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><c:set var="ctx" value="${pageContext.request.contextPath}"/><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>submitUserList_4</title>    <meta http-equiv="content-type" content="text/html; charset=utf-8">    <script language="JavaScript" src="${ctx }/js/jquery-3.1.1.min.js" ></script>    <script language="JavaScript" src="${ctx }/js/parseJson.js" ></script>    <script type="text/javascript" language="JavaScript">        //将表单序列化成json格式的数据(但不适用于含有控件的表单，例如复选框、多选的select)        function submitUserList_4() {alert("ok");            var jsonStr = $("#form1").                    serializeJson();                        //console.log("jsonStr:\r\n" + jsonStr);                        //alert(jsonStr);                        $.ajax({                            url : "${ctx}/test/getJsList",                            type : "POST",                            contentType : 'application/json;charset=utf-8', //设置请求头信息                            dataType : "json",                            data : jsonStr,                            success : function(data) {                                alert(data);                            },                            error : function(res) {                                alert(res.responseText);                            }                        });                    }                </script></head><body>    <h1>submitUserList_4</h1>    <form id="form1">        age:<input type="text" name="age" value="11"><br/>        name:<input type="text" name="name" value="jack"><br/>        sex:<input type="text" name="sex" value="男"><br/><br/>         age:<input type="text" name="age" value="12"><br/>        name:<input type="text" name="name" value="rose"><br/>        sex:<input type="text" name="sex" value="女"><br/><br/>        <input type="button" value="submit" onclick="submitUserList_4();">    </form></body></html>

JAVA

@RequestMapping(value = "/submitUserList_4", method ={RequestMethod.POST})    @ResponseBody    public String submitUserList_4(@RequestBody List<User> users)            throws Exception{        String result = "";        if(users == null || users.size() <= 0){ return "No any ID.中文"; }        result = this.showUserList(users);        return result;

启动SpringMVC的注解功能，完成请求和注解POJO的映射

<!-- 自动扫描该包，使SpringMVC认为包下用了@controller注解的类是控制器 -->    <context:component-scan base-package="com.leon" />    <!--避免IE执行AJAX时，返回JSON出现下载文件 -->    <bean id="mappingJacksonHttpMessageConverter"        class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">        <property name="supportedMediaTypes">            <list>                <value>text/html;charset=UTF-8</value>            </list>        </property>    </bean>    <!-- 启动SpringMVC的注解功能，完成请求和注解POJO的映射 -->    <bean        class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">        <property name="messageConverters">            <list>                <ref bean="mappingJacksonHttpMessageConverter" /> <!-- JSON转换器 -->            </list>        </property>    </bean>

POM

<!-- 映入JSON -->        <dependency>            <groupId>org.codehaus.jackson</groupId>            <artifactId>jackson-mapper-asl</artifactId>            <version>1.9.13</version>        </dependency>

$.fn.serializeJson = function(){                var jsonData1 = {};                var serializeArray = this.serializeArray();                // 先转换成{"id": ["12","14"], "name": ["aaa","bbb"], "pwd":["pwd1","pwd2"]}这种形式                $(serializeArray).each(function () {                    if (jsonData1[this.name]) {                        if ($.isArray(jsonData1[this.name])) {                            jsonData1[this.name].push(this.value);                        } else {                            jsonData1[this.name] = [jsonData1[this.name], this.value];                        }                    } else {                        jsonData1[this.name] = this.value;                    }                });                // 再转成[{"id": "12", "name": "aaa", "pwd":"pwd1"},{"id": "14", "name": "bb", "pwd":"pwd2"}]的形式                var vCount = 0;                // 计算json内部的数组最大长度                for(var item in jsonData1){                    var tmp = $.isArray(jsonData1[item]) ? jsonData1[item].length : 1;                    vCount = (tmp > vCount) ? tmp : vCount;                }                if(vCount > 1) {                    var jsonData2 = new Array();                    for(var i = 0; i < vCount; i++){                        var jsonObj = {};                        for(var item in jsonData1) {                            jsonObj[item] = jsonData1[item][i];                        }                        jsonData2.push(jsonObj);                    }                    return JSON.stringify(jsonData2);                }else{                    return "[" + JSON.stringify(jsonData1) + "]";                }            };

2 0