HTMLfrom提交表单

Posted 2022-02-07 波子汽水yeah

表单对象serializeArray出来的是一个数组，并且是 name:value这种形式，不是后台接对象的格式。需要转一下。数组问题后台用了一个list接收

之前项目里面是自己组装的对象，自己写的小demo不想这么麻烦直接用 from提交的。发现一些问题

springboot项目 @RequestBody 注解接收的时候 jackson序列化时要引入的包

   <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.12.3</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.12.3</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.12.3</version>
        </dependency>

前段代码 抄了网上一个小样

    //将表单序列化成json格式的数据(但不适用于含有控件的表单，例如复选框、多选的select)
    (function($)
        $.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) + "]";
            
        ;
    )(jQuery);


// 提交

    $('#add_medi').click(function() 
//这里得到的对象是name:value 这种形式，不是后台接收对象
        // var t = $('#addMedi').serializeArray();
        // 用下面自定义方法转了一下
        var t = $("#addMedi").serializeJson();
        console.log(t)
        console.log(JSON.stringify(t))
        $.ajax(
            type:"post",
            url:"medi/add",
            dateType:"json",
            contentType: "application/json;charset=UTF-8",
            data:t,
            success:function(result)
               console.log(result);
                // 重新加载数据，即重新请求数据，并加载
                console.log(app.userList);
                // data:JSON.stringify(this.queryParam),
                // 因为对象是不能在网络中传输的，（Json对象也是对象），所以这里要将json对象转换成json字符串
                // 然后再传输，后台的springmvc的@RequesyBody会将json字符串再转换成对象

                //这个地方尤其要注意一定要指定contentType的值为『"application/json"』 ，因为此处@RequestBody接受的是一个通过json转换的对象
                //如果不设置，默认为text/html,那么是支持该种类型的，会报415错误
            
        );


    );

手动组装表单数据 带上传文件

    function fabuAny() 
        //loading带文字
        layer.open(
            type: 2
            , content: '矮泥鸭~'
        );
        var noteMail = $('#noteMail').is(":checked");
        var myform = new FormData();
        var url = 'ss/savess';
        //var txtvalue = $("#everyDay").val();
        var txtvalue = editor.txt.html();
        console.log(txtvalue);
        // myform.append('files',filesArr); //不能这么传的
        for (var i = 0; i < filesArr.length; i++) 
            myform.append("files", filesArr[i]);
        
        myform.append("content", txtvalue);
        myform.append("noteMail", noteMail);
        console.log("上传文件列表", myform);
        $.ajax(
            type: "post",
            // dataType: "json",
            url: url,
            //data:JSON.stringify(params),
            data: myform,
            // contentType:'application/json',
            contentType: false,
            processData: false,
            success: function (data)  //后台必须返回json格式的这里才会执行success
                //关闭load层
                layer.closeAll();
                console.log(data);
                data = JSON.parse(data);
                console.log(data.success)
                if (data.success) 
                    layer.open(
                        content: '发布成功'
                        , skin: 'msg'
                        , time: 3 //2秒后自动关闭
                    );
                    location.reload();
                 else 
                    layer.open(
                        content: data.msg
                        , skin: 'msg'
                        , time: 3 //2秒后自动关闭
                    );
                
            
        );