ajax发送post请求报415和400

背景：点击按钮弹出一个表单对数据进行修改，点击表单的提交按钮会发送post请求。
报415是请求头的contentType不对劲，设置成：

contentType: "application/json",

400是因为前端发送的数据跟后端要求的格式不一样，要在前端进行序列化：

data: JSON.stringify(field),

完整的ajax：

 //修改表单监控（修改）
        form.on('submit(fromSubmitGradeInfo)', function(data) {
            var field = data.field; //获取提交的字段
            console.log(field);

            $.ajax({
                //请求方式
                type: "POST",
                //接口
                url: "/updGra",
                //序列化
                data: JSON.stringify(field),
                //请求头
                contentType: "application/json",
                success: function (data)
                {
                    window.location.reload();
                }
            });
        });

推荐看这篇文章：400和415解决方法

更新，如果使用layui框架，ajax不执行success和error可参考：ajax()不执行success也不执行error的分析和解决

@RequestParam和@RequestBody的区别：@RequestBody和@RequestParam注解以及返回值，ajax相关知识点

总结一下get请求对应的后台代码和post请求对应的后台代码

get

 $.ajax({
                        type: "GET",
                        url: "/delGra",
                        data: {"id": obj.data.gradeId},
                        //返回的数据类型
                        dataType: "json",
                        success: function(data){
                            if(data.code==0){
                                layer.alert("删除成功");
                            }else{
                                layer.alert("删除失败");
                            }
                        },
                        error: function(data){
                            console.log("code",data.code);
                            console.log("msg",data.msg);
                            location.reload(true);
                        }
                    });

    @GetMapping("/delGra")
    @ResponseBody
    public ResultData delGrade(@RequestParam("id") Integer gradeId){
        System.out.println("接收到的id："+gradeId);
        return gradeService.delGrade(gradeId);
    }

post

$.ajax({
                type: "POST",
                url: "/updGra",
                data: JSON.stringify(field),
                //浏览器发送给服务器的数据类型
                contentType: "application/json",
                //浏览器希望的返回值类型
                dataType : "json",
                success: function (data)
                {
                    if(data.code==0){
                        layer.alert("修改成功");
                        table.reload("table-GradeInfo");//id
                    }else{
                        layer.alert("修改失败");
                    }
                },
                error:function (data) {
                    console.log("code",data.code);
                    console.log("msg",data.msg);
                    location.reload(true);
                }
            });

     @PostMapping("/updGra")
    @ResponseBody
    public ResultData updGrade(@RequestBody Grade grade){
        return gradeService.updGrade(grade);
    }

点击添加按钮应弹出一个表单，但是出现以下错误：

代码如下：

 //添加
            add: function () {
                console.log("点击添加按钮");
                //隐藏id
                //$("#displayIdNone.value").css("display","none");
                //表单的内容清空
                $("#GradeInfoForm")[0].reset();
                layui.form.render();
                console.log("打开表单");
                layer.open({
                    type: 1,
                    title: "年级详情",
                    area: ['300px', '300px'],
                    btn: ['添加'], //弹出框的宽高
                    content: $("#GradeInfoForm"), //这里content是一个普通的String
                    //content: $('#id') //这里DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    yes: function(index, layer){
                        //触发表单提交
                        $("#form-GradeInfo-submit2").trigger('click');
                    }
                });
            }

这句出错，百度了一下有可能是Jquery版本过低，这里用的是1.8.2

 $("#GradeInfoForm")[0].reset();