个人中心
gpt4 book ai didi

javascript - AJAX 正在使用 POST 映射将所有空数据发送到 Spring Controller？

转载 作者：行者123 更新时间：2023-12-03 20:46:17 24 4
gpt4 key购买 nike

我正在尝试使用 ajax 将带有 POST 映射的 HTML 表单中的数据发送到 spring Controller 。但它正在发送所有空数据。为 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>
这是 Controller : 
    @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;
        }
    }

最佳答案

在您的 ajax 函数中，尝试将数据作为表单数据发送:
首先，使用 HTML 表单创建一个表单数据对象:

let createSchoolForm = document.getElementById('createSchool');
let formData = new FormData(createSchoolForm );
然后，将其添加到 data Ajax 对象中的键。删除 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>

关于javascript - AJAX 正在使用 POST 映射将所有空数据发送到 Spring Controller？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65401505/

24 4 0
文章推荐： php - 如何列出 pecl 包的所有版本
文章推荐： javascript - 在 Draft.js 装饰器中选择文本 onClick 装饰器实现拖放
文章推荐： python - SQLAlchemy with_for_update 读取陈旧数据
文章推荐： angular - 附加到门户时仅初始化一次组件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com