ajax提交form表单数据详解

话不多说，首先我们定义一个form标签，在form标签里面定义一些文本框，具体代码如下:

<form id="classForm" onsubmit="return false;">
                            <div class="form-group" style="display:flex;">
                                <label class="control-label">请输入班级信息:&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            </div>

                            <div class="form-group" style="display:flex;">

                                <input type="hidden" id="_id" name="_id"
                                       th:value="${cla!=null and cla._id!=null }?${cla._id}: ''"><!--隐藏域-->
                                <input type="text" class="form-control col-sm-6" id="creator" name="creator"
                                       placeholder="*请输入创建人"
                                       th:value="${cla!=null and cla.creator!=null }?${cla.creator}: ''"
                                       required="true">

                                <input type="text" class="form-control col-sm-6" id="classNmae" name="className"
                                       placeholder="*请输入班级名称"
                                       th:value="${cla!=null and cla.className!=null }?${cla.className}: ''"
                                       required="true">&nbsp;&nbsp;
                            </div>


                            <div class="form-group" style="display:flex;">
                                <input type="text" class="form-control col-sm-6" id="teacherName" name="teacherName"
                                       placeholder="*请输入老师名称"
                                       th:value="${cla!=null and cla.teacherName!=null }?${cla.teacherName}: ''"
                                       required="true">
                            </div>

                            <div class="form-group">
                                <!-- 按钮 -->
                                &nbsp;<button class="btn btn-info float-right" style="margin-left: 5px;"
                                              id="saveClassButton">保存班级信息
                            </button>&nbsp;
                                &nbsp;<button class="btn btn-secondary float-right" style="margin-left: 5px;"
                                              id="cancelClassButton">返回班级列表
                            </button>&nbsp;
                            </div>
                        </form>

使用ajax发送请求，提交表单数据给后端。
重点关注var form = new FormData(document.getElementById("表单id名称"))
这是一个我写此篇文章的主要目的，因为这样很方便，不用定义变量，记录每一个文本框的值，节省了大量的代码。

$('#saveClassButton').click(function () {
    alert("测试班级添加按钮");
    var data = new FormData(document.getElementById("classForm"));

    $.ajax({
        url: '/class/saveClass',
        type: 'post',
        data: data,
        processData: false,
        contentType: false,
        datatype: 'json',
        success: function (result) {
            if (r.resultCode == 200) {
                swal({
                    title: '查询成功',
                    type: 'success',
                    showCancelButton: false,
                    confirmButtonColor: '#1baeae',
                    confirmButtonText: '返回商品列表',
                    confirmButtonClass: 'btn btn-success',
                    buttonsStyling: false
                }).then(function () {
                    window.location.href = "/user/query_page";
                })
            }
        },
        error: function (result) {
            swal("操作失败" + result.message, {
                icon: "error",
            });
        }
    });
});

controller接受请求（cla代表实体类对象,用它跟前端传递过来的文本框的值一一对应）。

/*
     * 保存班级信息
     * */
    @RequestMapping("/saveClass")
    @ResponseBody
    public String saveClass(Cla cla) {
        System.out.println("测试班级前端填写的班级信息" + cla);
        return "123";
    }

总结

使用ajax发送请求，算是走了很大的一个坑，花了很多的时间在这上面，表面看起来，很简单，但是自己实际操作起来，会发现，细节特别多的。

ajax发送请求的主要难点，也就是当发送数据给后端的时候，前后端具体如何定义，数据的发送格式，以及数据的接受格式。
看完恭喜你，又知道了一点点!
你知道的越多，不知道的越多！
感谢您的阅读，你的关注和评论，是对我学习的最大的支持，加油，陌生人，一起努力。