javascript - XHR 加载失败 : POST java spring

Question

我正在尝试使用 ajax 将数据从我的 jsp 页面发送到我的 Controller 。 但是我无法完成它，每次我都会收到帖子标题中显示的错误。

JSP 内容:(这是我加载所有用户的模式，我想通过将我的用户 ID 和当前项目 ID 发送到我的 Controller 来将它们添加到项目中)

<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <h1 class="text-center">UserList</h1>
                    <br><br>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Photo</th>
                                <th>Firstname</th>
                                <th>Lastname</th>
                                <th>Function</th>
                                <th>Email</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach var="u" items="${users}">
                                <tr>
                                    <td><img src="${u.getPhoto()}"
                                             alt="Alternate Text" class="img-responsive" /></td>
                                    <td>${u.getFirstname()}</td>
                                    <td>${u.getLastname()}</td>
                                    <td>${u.getFunction()}</td>
                                    <td>${u.getEmail()}</td>
                                    <td><Button type="Button" onclick="myFunction()" id="addButton" class="btn btn-default">Add</button></td>
                            <input type="hidden" id="currentProjectId" value="${p.getProjectId()}">
                            <input type="hidden" id="userId" value="${u.getUserId()}">
                            </tr> 
                        </c:forEach>
                        </tbody>
                    </table>

                    <script>
                        function myFunction()
                        {
                            var currentProjectId = $('#currentProjectId').val();
                            var userId = $('#userId').val();

                            $.ajax({
                                type: "POST",
                                contentType: "application/json",
                                url: "addUserToProject",
                                data: JSON.stringify({projectId: currentProjectId, userId: userId}),
                                dataType: 'json',
                                timeout: 600000,
                                success: function (data) {
                                    console.log("SUCCESS: ", data);
                                },
                                error: function (e) {
                                    console.log("ERROR: ", e);
                                }
                            });
                        }
                    </script>

                </div>
            </div>
        </div>
    </div>

Controller 内容:

@RequestMapping(value = "/addUserToProject", method = RequestMethod.POST)
public @ResponseBody
String addUser(@RequestParam("projectId") String projectId, @RequestParam("userId") String userId) {

    UUID uid = UUID.fromString(userId);
    UUID pid = UUID.fromString(projectId);
    User u = UserList.getInstance().readUserById(uid);
    Project p = ProjectList.getInstance().readProjectByID(pid);

    ProjectList.getInstance().addUsertoProject(u, p);
    return "redirect:/projectpage";
}

我现在得到的结果是这样的: Console output

我在这里做错了什么？非常感谢任何帮助!

Answer 1

您应该将参数传递给您要发布的网址，例如:

url: "/addUserToProject?projectId=" + currentProjectId + "&userId=" + userId;

并且不要忘记从您的 ajax 帖子中删除“数据”部分。

PS:如果您想在 ajax 请求中使用“数据”，您需要从 Java 方法中删除 @RequestParam 注释。相反，您可以创建一个新的模型类并将参数与其 getter 和 setter 方法放在一起。使用 @RequestBody 注释将该模型传递给 Java 方法。然后您可以在您的 ajax 请求中使用“数据”。