axios提交表单

后端使用@RequestBody接收jsons数据

因为后端接收json数据，所以前端也要发送json

项目的前端是使用layui的数据表单

案例方法

方法一:JSON字符串

提交的数据格式

{"userName": "1", "password": "1", "name": "1", "phone": "1", "type": "0", "remark": "1"}

必须要加头部header,不然默认是Content-Type: application/x-www-form-urlencoded

       form.on('submit(saveBtn)', function (data) {
            console.log(JSON.stringify(data.field))
            console.log(data.field)
            axios({
                headers:{
                    'content-type':'application/json'
                }
                ,method:"post"
                ,url:'/user/add'
                ,data:JSON.stringify(data.field)
            }).then(res=>{
                layer.msg("添加成功",{
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                },function () {
                    layer.close(parentIndex);
                })

            }).catch(res=>{
                layer.msg("添加失败")
            });
            return false;
        });

方法二

提交的数据格式

{userName: "1", password: "1", name: "1", phone: "1", type: "0", remark: "1"}

      form.on('submit(saveBtn)', function (data) {
            console.log(JSON.stringify(data.field))
            console.log(data.field)
            axios({
                method:"post"
                ,url:'/user/add'
                data:data.field
            }).then(res=>{
                layer.msg("添加成功",{
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                },function () {
                    layer.close(parentIndex);
                })

            }).catch(res=>{
                layer.msg("添加失败")
            });
            return false;
        });

分析

因为在axios的源码中,会进行一个判断处理。

transformRequest: [function transformRequest(data, headers) {
                        normalizeHeaderName(headers, 'Accept');
                        normalizeHeaderName(headers, 'Content-Type');
                        if (utils.isFormData(data) ||
                            utils.isArrayBuffer(data) ||
                            utils.isBuffer(data) ||
                            utils.isStream(data) ||
                            utils.isFile(data) ||
                            utils.isBlob(data)
                        ) {
                            return data;
                        }
                        if (utils.isArrayBufferView(data)) {
                            return data.buffer;
                        }
                        if (utils.isURLSearchParams(data)) {
                            setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
                            return data.toString();
                        }
                        if (utils.isObject(data)) {
                            setContentTypeIfUnset(headers, 'application/json;charset=utf-8');//***关键******
                            return JSON.stringify(data);//*******关键*********
                        }
                        return data;
                    }],