HTMLfrom提交表单

Posted 2021-06-30 波子汽水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秒后自动关闭
                    });
                }
            }
        });

    }