SpringMVC將表單物件序列化成Json字串提交，以List接收

阿新 • • 發佈：2019-01-14

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

SpringMVC將表單物件序列化成Json字串提交，以List接收

HTML <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false"%>

javascript jquery將表單form序列化成json提交

由於本人剛接觸java就要開始開發專案，用到的東西很多很雜，對javascript以及jquery只是一知半解，只能通過不斷的學習慢慢的補起來了。由於自己要獨立的開發一個簡單的系統，其中會用到form表單序列化成json後提交，配合服務端spring mvc的@Reque

將表單內容轉化成json字串，並通過ajax提交！

1.JQuery的自定義方法，直接寫個js檔案放到裡邊，用的時候引一下就可以。 (function($) { $.fn.extend({ serializeObject :

用js將表單資料封裝成json字串

用js將表單資料封裝成json字串 1.js中封裝程式碼： $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, func

將表單資料序列化為 js物件

$.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); $.each(a, function () { if (

jquery將form表單內容轉換為json字串

var formObject = {}; var formArray = $("#form").serializeArray(); $.each(formArray, function (i, item) { formObject[item.name] = item.val

jquery把表單資料序列成json，支援多維陣列

jQuery.formHelper = { getObject: function (urlserialize) { if (urlserialize) { urlserialize = decodeURI(urlserialize);

在C#中將物件序列化成Json格式

在C#中將物件轉換為Json格式的字串。 //匿名物件 var dataObj = new { Number = 1, Name = "Json" }; //將返回的

jQuery 表單資料序列化為json格式

jQuery是在web應用中使用的指令碼語言之一，因其具有輕量級,易學易用等特點，已廣泛應用，其中的ajax封裝簡化了我們的應用，對其表單資料序列化用如下方法： 1.serialize()方法　　格式：var data = $("#formID").serialize

Spring Boot Cache配置序列化成JSON字串

當我們使用@Cacheable註解的時候會將返回的物件快取起來，我們會發現預設快取的值是二進位制的，不方便檢視，為此我們自定義序列化配置，改成JSON格式的配置如下： pom.xml <?xml version="1.0" encoding="UTF-8

Java物件轉化成 json字串輸出

======ok == com.alibaba.fastjson.JSONObject ====== res : {"bwDictId":2,"list":"127.0.0.1","logUserId":33,"note":"黑名單測試Note","sco

利用Jquery將表單序列化成JS物件

//表單序列化成JSON物件 $.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); $.each(a, function () { if (o[this.name]) { if (!o[this.nam

Jquery 將表單序列化為Json物件.同時提交多個表單的引數

首先對某一表單進行Json物件序列化：　 [javascript] view plain copy (function($){ $.fn.serializeJson=function(){ var se

將表單序列化為json物件

js將form內的表單序列化為json字串、陣列、物件

序列化為字串var params1 = $(#myform).serialize();//name=zhangsan&sex=1&age=20序列化為陣列$(#myform).serializeArray();//[Object, Object, Objec

將表單序列化為json對象

pan span class obj ret value his json () $.fn.serializeJson=function(){ var serializeObj={}; var array=t

用表單格式化外掛jquery.serializejson將表單上的資料轉換成JSON物件

沒有這個外掛之前要想JS獲取到form表單的資料，在ajax傳到後臺也是蠻痛苦的事，雖然都是簡單用$(“#id”).val()獲取到表單的值，要是量多了也是很磨人的。好吧，廢話不多說！看下這個jquery.serializejson.js外掛是怎麼給我們帶來

將表單序列化為json字串

網上序列化表單內容成json字串，有的很複雜有的完全不好用；現在分享的是真正好用的一個例子。準備內容 1. js中if的條件表示式所有的物件都被當作 true 當且僅當字串為空時，該字串

SpringMVC form表單提交list物件集合

form表單頁面 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %&

表單陣列封裝成Json物件陣列

最近在搗鼓著Json與ajax結合傳遞資料到後臺。在這此前寫過Gson處理前端傳遞過來的Json物件陣列所以接著寫一下如何把表單陣列封裝成Json物件。場景：需要把表格中的表單轉化為一個Json物件我通過使用jQuery的相關方法實現表單資料的序

SpringMVC將表單物件序列化成Json字串提交，以List接收

相關推薦