AJAX 使用 POST 映射将所有空数据发送到 Spring 控制器？答案

【问题标题】：AJAX is sending all null data to the Spring Controller using POST mapping?AJAX 使用 POST 映射将所有空数据发送到 Spring 控制器？
【发布时间】：2021-03-31 17:34:43
【问题描述】：

我正在尝试使用 ajax 将带有 POST 映射的 HTML 表单中的数据发送到 spring 控制器。但它正在发送所有空数据。为 ajax 尝试了很多变化。它正在发送学校对象，但所有字段均为空。控制台显示字段正在保存，但在 AJAX 中全部变为空。

这里是 createSchoolForm.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>Create School || EDUBD</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
</head>
<body>
    <h1>EDUBD - Manage School Portal</h1>

    <h3>Create New School</h3> <br>

    <form id="createSchool">
        <br>
        <label>School Name:
        <input type="text" id="schoolName"  value="" />
        </label>
        <br>
        <label>School Email:
        <input type="text" id="schoolEmail" value="" />
        </label>
        <br>
        <label>School Phone Number:
        <input type="tel" id="schoolPhone" value="" />
        </label>
        <br>
        <input id="btn" type="submit" value="Submit" />
    </form>

    <div id="feedback"></div>



    <script>
        $(document).ready( function() {
            $("#createSchool").submit(function(e){
                e.preventDefault();
                var schoolData = {
                    schoolName: $("#schoolName").val(),
                    schoolEmail: $("#schoolEmail").val(),
                    schoolPhone: $("#schoolPhone").val(),
                    status: null,
                    schoolStreet: null,
                    schoolHouse: null,
                    schoolZip: null,
                    schoolCity: null,
                    schoolState: null,
                    schoolCountry: null,
                    image: null,
                    createBy: null,
                    updatedBy: null,
                    createdDate: null,
                    updatedDate: null,
                    id: null
                };
               // let j = JSON.stringify(schoolData);
                console.log(JSON.stringify(schoolData));

                $.ajax({
                    header:{
                        contentType : 'application/x-www-form-urlencoded; charset=UTF-8'
                    },
                    type : "post",
                    url : "Create",
                    data : JSON.stringify(schoolData),
                    dataType : "json",
                    success: function (data) {
                        var json = "<h4>Ajax Response</h4>&lt;pre&gt;"
                            + JSON.stringify(data, null, 4) + "&lt;/pre&gt;";
                        $('#feedback').html(json);
                        console.log("SUCCESS : ", data);
                    },
                    error: function (e) {
                        var json = "<h4>Ajax Response</h4>&lt;pre&gt;"
                            + e.responseText + "&lt;/pre&gt;";
                        $('#feedback').html(json);
                        console.log("ERROR : ", e);
                    }
                });
            });
        });

    </script>

</body>
</html>

这里是控制器：

    @ApiOperation(value = "Create School")
    //@PostMapping(BASE_SCHOOL_PATH+"/Create")
    @PostMapping(value = BASE_SCHOOL_PATH+"/Create", produces = {"application/json"},
            consumes = {"application/x-www-form-urlencoded"})
    public  String create (School school, @ApiIgnore HttpServletResponse response) throws IOException {
        // components tests are expecting this assertion and exception handling, and will fail if removed
        try {
            Assert.isNull(school.getId(), "School ID field must be null");
            Assert.notNull(school.getSchoolEmail(),"School email cannot be null.");
            Assert.notNull(school.getSchoolPhone(),"School Phone number cannot be null. ");
            Assert.isNull(schoolDao.readByEmail(school.getSchoolEmail()),"School already exists in the system.");
            schoolDao.create(school, null);
            return "createSchoolForm";
        } catch (IllegalArgumentException e) {
            logger.error(e.getMessage(), e);
            response.sendError(HttpServletResponse.SC_PRECONDITION_FAILED, e.getMessage());
            return null;
        } catch (Exception e) {
            logger.error(e.getMessage(), e);
            response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR, e.getMessage());
            return null;
        }
    }

【问题讨论】：

这个问题是关于javascript还是java？它们是两种完全不同的语言

标签： javascript java html

【解决方案1】：

在您的 ajax 函数中，尝试将数据作为表单数据发送：

首先，使用 HTML 表单创建一个表单数据对象：

let createSchoolForm = document.getElementById('createSchool');
let formData = new FormData(createSchoolForm );

然后，将其添加到 Ajax 对象中的 data 键中。删除header 和dataType，因为它可能与Ajax 通信冲突。

 $.ajax({
                    type : "post",
                    url : "Create",
                    data : formData
                    success: function (data) {
                        var json = "<h4>Ajax Response</h4>&lt;pre&gt;"
                            + JSON.stringify(data, null, 4) + "&lt;/pre&gt;";
                        $('#feedback').html(json);
                        console.log("SUCCESS : ", data);
                    },
                    error: function (e) {
                        var json = "<h4>Ajax Response</h4>&lt;pre&gt;"
                            + e.responseText + "&lt;/pre&gt;";
                        $('#feedback').html(json);
                        console.log("ERROR : ", e);
                    }
                });

完整示例：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>Create School || EDUBD</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
</head>
<body>
    <h1>EDUBD - Manage School Portal</h1>

    <h3>Create New School</h3> <br>

    <form id="createSchool">
        <br>
        <label>School Name:
        <input type="text" id="schoolName"  value="" />
        </label>
        <br>
        <label>School Email:
        <input type="text" id="schoolEmail" value="" />
        </label>
        <br>
        <label>School Phone Number:
        <input type="tel" id="schoolPhone" value="" />
        </label>
        <br>
        <input id="btn" type="submit" value="Submit" />
    </form>

    <div id="feedback"></div>



    <script>
        $(document).ready( function() {
            $("#createSchool").submit(function(e){
                e.preventDefault();
                var schoolData = {
                    schoolName: $("#schoolName").val(),
                    schoolEmail: $("#schoolEmail").val(),
                    schoolPhone: $("#schoolPhone").val(),
                    status: null,
                    schoolStreet: null,
                    schoolHouse: null,
                    schoolZip: null,
                    schoolCity: null,
                    schoolState: null,
                    schoolCountry: null,
                    image: null,
                    createBy: null,
                    updatedBy: null,
                    createdDate: null,
                    updatedDate: null,
                    id: null
                };
               // let j = JSON.stringify(schoolData);
                console.log(JSON.stringify(schoolData));

               let createSchoolForm = document.getElementById('createSchool');
               let formData = new FormData(createSchoolForm );

                $.ajax({
                    type : "post",
                    url : "Create",
                    data : formData 
                    success: function (data) {
                        var json = "<h4>Ajax Response</h4>&lt;pre&gt;"
                            + JSON.stringify(data, null, 4) + "&lt;/pre&gt;";
                        $('#feedback').html(json);
                        console.log("SUCCESS : ", data);
                    },
                    error: function (e) {
                        var json = "<h4>Ajax Response</h4>&lt;pre&gt;"
                            + e.responseText + "&lt;/pre&gt;";
                        $('#feedback').html(json);
                        console.log("ERROR : ", e);
                    }
                });
            });
        });

    </script>

</body>
</html>

【讨论】：

试过了。现在，它不会进入控制器。它给出错误。这是来自浏览器控制台的错误。 {"schoolName":"UWM",.....,....} jquery-1.12.3.min.js:4 Uncaught TypeError: Illegal invocation at e (jquery-1.12.3.min.js:4) at dc (jquery-1.12.3.min.js:4) at Function.n.param (jquery-1.12.3.min.js:4) at Function.ajax (jquery-1.12.3.min.js:4) at HTMLFormElement.<anonymous> (SchoolCreate:63) at HTMLFormElement.dispatch (jquery-1.12.3.min.js:3) at HTMLFormElement.r.handle (jquery-1.12.3.min.js:3)

【解决方案2】：

对我有用的解决方案。

我尝试了不同的方法来解决这个问题。它实际上帮助我理解了 HTTP 请求的工作原理。这是对我有用的解决方案。我使用 XMLHttpRequest() 从 HTML 表单发送数据。发送后，我必须使用@RequestBody 捕获数据。这对于 POST 工作很重要。我的控制器中还有 2 个不同的 produces 和 consumes。必须匹配那些。最后，使用<button> 代替<input> 进行提交。

解决方案

新的 HTML 如下所示：

 <h3>Create New School</h3> <br>
    <form id="createSchool" method="post">
        <br>
        <label>School Name:
        <input type="text" id="schoolName"  value="" required/>
        </label>
        <br>
        <label>School Email:
        <input type="email" id="schoolEmail" value="" required/>
        </label>
        <br>
        <label>School Phone Number:
        <input type="tel" id="schoolPhone" value="" required/>
        </label>
        <br>
        <button type="button" id="submit">Submit Form</button>
    </form>

    <div id="feedback"></div>

    <script>
        $(document).ready( function() {
            $("#submit").click(function(e) {
                e.preventDefault();
                var school=new Object(); //creating object to add values. 
                school.schoolName = $("#schoolName").val();
                school.schoolEmail= $("#schoolEmail").val();
                school.schoolPhone = $("#schoolPhone").val();
                school.status= null;
                school.schoolStreet= null;
                school.schoolHouse= null;
                school.schoolZip= null;
                school.schoolCity= null;
                school.schoolState= null;
                school.schoolCountry= null;
                school.image= null;
                school.createBy= null;
                school.updatedBy= null;
                school.createdDate= null;
                school.updatedDate= null;
                school.id= null;

                var s2=JSON.stringify(school);
                console.log(s2);

                var xhr = new XMLHttpRequest();
                xhr.open("POST", "SchoolCreate",true);
                xhr.setRequestHeader("Content-Type", "application/json");
                xhr.onreadystatechange = function() { // Call a function when the state changes.
                    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
                        // Request finished. Do processing here.
                        console.log("success");
                        $('#feedback').html("Success");
                    }
                    else {
                        console.log(xhr.responseText);
                        $('#feedback').html(xhr.responseText);
                    }
                }
                xhr.send(s2);

                //This will empty the fields after submission.
                document.getElementById('schoolName').value='';
                document.getElementById('schoolEmail').value='';
                document.getElementById('schoolPhone').value='';


            });
        });
    </script>

</body>

控制器：

    @ApiOperation(value = "Create School")
    @PostMapping(value = "/ManageSchool"+BASE_SCHOOL_PATH+"/SchoolCreate", produces = {"application/json"},
            consumes = {"application/json"})
    public String create (@RequestBody School school, @ApiIgnore HttpServletResponse response) throws IOException {
        // components tests are expecting this assertion and exception handling, and will fail if removed
        try {
            Assert.isNull(school.getId(), "School ID field must be null");
            Assert.notNull(school.getSchoolEmail(),"School email cannot be null.");
            Assert.notNull(school.getSchoolPhone(),"School Phone number cannot be null. ");
            Assert.isNull(schoolDao.readByEmail(school.getSchoolEmail()),"School already exists in the system.");
            schoolDao.create(school, null);
            return "createSchoolForm";
        } catch (IllegalArgumentException e) {
            logger.error(e.getMessage(), e);
            response.sendError(HttpServletResponse.SC_PRECONDITION_FAILED, e.getMessage());
            return null;
        } catch (Exception e) {
            logger.error(e.getMessage(), e);
            response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR, e.getMessage());
            return null;
        }
    }

这些答案最终帮助我找到了一些基础。

How to transfer data from HTML to controller Spring

XMLHttpRequest not sending POST data

【讨论】：