application/x-www-form-urlencoded请求出现400错误

最近实现一个分页的功能，因为分页所以参数多且杂乱，一个实体类是接受不完的，于是就用了application/x-www-form-urlencoded这种请求方式，而不是application/json，两者的区别以及在什么情况下使用请看博客，有详细的说明：https://blog.csdn.net/java_xxxx/article/details/81205315

然后问题就出现了，就是我发送请求一直给我报400的错误，我就纳闷了，一直调试，一直调试，结果发现了问题，如图所示，我后台封装的有初始页的大下，与页码，当点击提交的时候，会将这些参数一直快提交，但是问题出现了，当我指点击提交而不选择日期的时候，完全没问题，前台发送，后端接受到参数。但是当点选择过日期后，就一直报400。

原因分析：400，那就是请求头或者数据格式不正确，在排除了请求头没问题后，那就是数据格式的原因了，但是这个是表单提交，没问题啊，后来干脆把发送的数据JSON.stringify(参数)；将它转为字符串，结果，前台没报错了，后台接受得到的参数全部null。然后再象会不会是日期的格式原因，我用的是elementUI的时间控件。代码如下:大家不要误解，这里的type:date是显示类型，实际类型还是字符串，有兴趣的朋友可以去看elementUI的官方文档(http://element-cn.eleme.io/#/zh-CN/component/date-picker)，但是不知道是什么原因导致该类型无法正确的被解析,于是在发送ajax到后台的过程中，就出现了问题
html

 <el-date-picker
                         v-model="queryParam.startTime"
                         type="date"                 
                         placeholder="选择日期">
                 </el-date-picker>

解决办法：在控件里指定日期的格式，然后将日期加上一个字符串，就变为了字符串类型了
代码如下
html

 <el-date-picker
                         v-model="queryParam.startTime"
                         type="date"
                         @change="dataChange"
                         value-format="yyyy-MM-dd"
                         placeholder="选择日期">
                 </el-date-picker>

js：注意，该方法还有另外一个好处，那就是我们在实现时间查询的时候，一般都是开始时间和截止时间，如果用的是ssm+mysql的话，它查询不到当天的即（2018-08-06-2018-08-08），它查询不到08-08这天的数据，符合一般的左开右闭原则。但是很苦恼，于是我们在这里直接将时间定义为年月日，在js里将开始时间设为0，结束时间加上23h59m59s。一举两得。

 dataChange:function () {  // 时间查询

            //  由于我用的是elementUI的时间控件，他的数据格式可能不是字符格式的
            if(this.queryParam.startTime!='' && this.queryParam.startTime.length != 19){
                this.queryParam.startTime+=' 00:00:00';
            }
            if(this.queryParam.endTime!='' && this.queryParam.endTime.length != 19){
                this.queryParam.endTime+=' 23:59:59';
            }
            this.getUserList();
        }

发送请求

  $.ajax({
                type:"post",
                url:this.api.page,
                dateType:"json",
                contentType : 'application/x-www-form-urlencoded',
                data:this.queryParam,
                success:function(result){

                }
            });

参数queryParam

var _queryParam={        // 分页条件查询
    pageSize:2,     //  每页显示条数默认值
    pageNumber:1,   //  当前页码默认值
    startTime:"",   //  按创建时间查询
    endTime:""
}

controller代码

@RequestMapping("/ptUser/page.do")
    @ResponseBody
    public ApiResult page(MyPage page,
                          @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") Date startTime,
                          @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") Date endTime){
        ApiResult apiResult = new ApiResult();
        System.out.println("页面大小"+page.getPageSize());
        System.out.println("页码"+page.getPageNumber());
        System.out.println("开始时间"+startTime);
        System.out.println("结束时间"+endTime);
        return apiResult;
    }

上面的例子是用的原始的ajax请求方式来发送的请求，接下来我们用axios来发送请求，因为是axios，有点坑，如果只是改变请求头为表单提交，那么后台将得不到任何数据，它吧所有的请求方式都会转换成application/json这种格式，它默认的也是这种格式，下面我们就来解决了它

 axios.post(this.api.page, this.transformRequest(this.queryParam), {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            })
                .then(function (response) {
                    //console.log(response);
                })
                .catch(function (error) {
                   // console.log(error);
                });

因为我们这里是用表单方式提交的,所以参数的形式为键值对方式得用=和&，但是axious是用的application/json,所以，我们要改变参数的封装格式

transformRequest: function (data) {
            var ret = '';
            for (var it in data) {
                if(data[it] != null && data[it] !== ''){
                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                }
            }
            return ret
        }

完美解决问题

果真是一步一个坑