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

出自：http://blog.csdn.net/m0_37595732/article/details/71440853

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) + "]";

                }

            };

修改的js，返回json的数组对象

$.fn.serializeJson = function(){

    var jsonData1 = {};

    var serializeArray = this.serializeArray();

    // 先转换成Object{id:Array(2),name:Array(2),pwd:Array(2)}==>{"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;

        }

    });

    // 再转成[Object,Object]==>[{"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;

    }

    var jsonData2 = new Array();

    if(vCount > 1) {

        for(var i = 0; i < vCount; i++){

            var jsonObj = {};

            for(var item in jsonData1) {

                jsonObj[item] = jsonData1[item][i];

            }

            jsonData2.push(jsonObj);

        }

    }else{

        jsonData2.push(jsonData1);

    }

    return jsonData2;//返回的是json的对象数组

};

总结：最关键的是JS中的拼接json数据，ajax请求的属性以及后台接收的参数

SpringMVC将表单对象序列化成Json字符串提交，以List接收的更多相关文章

C#将对象序列化成JSON字符串
C#将对象序列化成JSON字符串 public string GetJsonString() { List<Product> products = new List<Product& ...
使用 EntityFramework后把一个对象序列化成json字符串引起循环引用的问题
先看一个T4模板生成的model实体类著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:卷猫链接:http://anneke.cn/ArticleInfo/Detial ...
.net 将List序列化成Json字符串
将List类型转化为Json,是我们平常开发时最常见的了.在使用中,有很多种方法,也可以使用. 第一种第三方组件:Newtonsoft.Json.dll //转化成Json Newtonsoft.J ...
对象序列化成Json字符串及反序列化成对象
一. public static string JsonSerializer<T>(T t) { DataContractJsonSerializer ...
Spring Boot Cache配置序列化成JSON字符串
当我们使用@Cacheable注解的时候会将返回的对象缓存起来,我们会发现默认缓存的值是二进制的,不方便查看,为此我们自定义序列化配置,改成JSON格式的配置如下: pom.xml <?xml ...
jackson2.8.4java对象序列化成json字符串格式化时间
public class User {private int id; private Date birthday; private double money; private String name; ...
JQuery将form表单值转换成json字符串函数
由于后台接口限定,必须要将表单内容转换成json字符串提交,因此写了一个将form表单值转成json字符串的函数. 前提:页面引入了JQuery 下面直接上代码一.代码 / ...
jQuery表单验证以及将表单序列化为json对象小练习
jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...
form表单序列化为json格式数据
在web开发过程中,经常遇到将form序列化不能格式的字符串提交到后台,下面就介绍怎样将form表单序列化为json字符串. 首先,是扩展的jquery序列化插件,依赖jquery.经测试,这段代码可 ...

随机推荐

一个关于PCA的疑问
我们知道PCA干的事情是把n维的样本投影到k维,同时丢失的信息能够达到最少. 为什么说principal component是covariance matrix的特征值中最大的前k个对应的特征向量上的 ...
Python Qt5 Creator 使用创建项目教程
1.下载Creator 4.2.1 2.点击文件-新建项目-QT-QT designer Form 然后 choose 3. 4.窗口组件选择 5.下一步,然后就可以自己设计了,,, 最后说一下,保存 ...
《DSP using MATLAB》示例Example7.2
Flask第五篇——设置debug模式
flask默认是没有开启debug模式的,开启debug模式有很多好处: 第一,可以帮助我们查找代码里面的错误,比如: # coding: utf-8 from flask import Flask ...
python 访问权限和下划线
Class内部,可以有属性和方法,而外部代码可以通过直接调用实例变量的方法来操作数据 1.__xx__(两边两个下划线):是特列方法像__init__之类的,是python的内嵌的方法在特定的时候会被 ...
verilog中的有符号数理解（转）
verilog中的有符号数运算有符号数的计算:若有需要关于有号数的计算,应当利用Verilog 2001所提供的signed及$signed()机制. Ex: input signed [7:0] ...
drone 学习四几个有用的命令
1. 安装cli 工具 linux curl -L https://github.com/drone/drone-cli/releases/download/v0.8.5/drone_linux_am ...
strlen和sizeof的长度区别
strlen返回字符长度而sizeof返回整个数组占多长,字符串的\0也会计入一个长度
中兴G718C开发者模式开启
系统设置--关于手机--版本号,连按七次,打开开发者选项请进入设置——连接到PC——默认连接类型——安装驱动,选择即可.然后将手机和电脑连接,打开“我的电脑”或“计算机”会弹出可移动盘符“USB D ...
NumPy-快速处理数据--ufunc运算--广播--ufunc方法
本文摘自<用Python做科学计算>,版权归原作者所有. 1. NumPy-快速处理数据--ndarray对象--数组的创建和存取 2. NumPy-快速处理数据--ndarray对象-- ...

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

SpringMVC将表单对象序列化成Json字符串提交，以List接收的更多相关文章

随机推荐

热门专题