Question

我使用Spring启动和JSP项目，下面提供了UI，

我想使用删除按钮删除行条目。页面list.jsp使用控制器方法

加载

@GetMapping(value = "/")
public String index() {
    return "redirect:/users";
}

@GetMapping(value = "/users")
public String showAllUsers(Model model) {

    model.addAttribute("users", userService.findAll());
    return "list";
}

按钮的JSP部分位于list.jsp页面，

<td>
                    <spring:url value="/users/${user.id}" var="userUrl"/>
                    <button class="btn btn-info" onclick="location.href='${userUrl}'">Query</button>

                    <spring:url value="/users/${user.id}/delete" var="deleteUrl"/>

          <button class="btn btn-danger" onclick="this.disabled=true;removeUser()">Delete</button>

                    <spring:url value="/users/${user.id}/update" var="userUpdate"/>
                    <button class="btn btn-info" onclick="location.href='${userUpdate}'">Update</button>
                </td>

删除的控制器映射

@DeleteMapping(value = "/users/{id}/delete")
    public String deleteUser(@PathVariable("id") Long idx, final RedirectAttributes redirectAttributes) {

        logger.debug("Delete user with Id {}", idx);

        redirectAttributes.addFlashAttribute("css", "Success");
        redirectAttributes.addFlashAttribute("msg", "The user is deleted");

        // delete the user
        userService.delete(idx);
        return "redirect:/users/";
    }

我在自定义文件中有JavaScript函数，

function removeUser(){

}

并且，在单击删除按钮后，我可以获得一些控制台输出，这意味着删除按钮正在工作。我应该如何实现在单击按钮后删除行的removeUser函数？

我想知道我是否可以使用jQuery中的任何内置方法执行此操作。感谢。

Query和Update按钮具有各自的控制器方法并且正常工作。

如果我离开它就像

<spring:url value="/users/${user.id}/delete" var="deleteUrl"/>

它不会删除该行或执行任何操作

Update

我可以将删除URL传递给自定义JavaScript函数

<spring:url value="/users/${user.id}/delete" var="deleteUrl"/>
                    <button class="btn btn-danger" onclick="this.disabled=true;removeUser('${deleteUrl}')">Delete</button>

提供了removeUser功能，

function removeUser(deleteURL) {

    console.log("Remove : " + deleteURL);

    $.ajax({

        type: "DELETE",
        url: deleteURL,

        success: function () {

        },

        failure: function (errMsg) {
            console.log(errMsg.toString())
        }
    });
}

我曾尝试编写成功函数，但不能正常工作

Answer 1

问题下的评论非常有用，我设法用最少量的代码完成。 JSP页面中的按钮调用removeUser函数，

<tr id="myTableRow">
                <td><c:out value="${user.id}"/></td>
                <td><c:out value="${user.name}"/></td>
                <td><c:out value="${user.email}"/></td>
                <td><c:forEach var="framework" items="${user.framework}" varStatus="loop">
                    ${framework}
                    <c:if test="${not loop.last}">,</c:if>
                </c:forEach>
                </td>

                <td>
                    <spring:url value="/users/${user.id}" var="userUrl"/>
                    <button class="btn btn-info" onclick="location.href='${userUrl}'">Query</button>

                    <spring:url value="/users/${user.id}/delete" var="deleteUrl"/>
                    <button class="btn btn-danger" onclick="removeUser('${deleteUrl}')">Delete</button>

                    <spring:url value="/users/${user.id}/update" var="userUpdate"/>
                    <button class="btn btn-info" onclick="location.href='${userUpdate}'">Update</button>
                </td>
            </tr>

removeUser函数，

// delete the user from the database
function removeUser(deleteURL) {

    $.ajax({

        type: "DELETE",
        url: deleteURL,

        success: function () {
            // window.location.reload();
             $('#myTableRow').remove();
        },

        failure: function (errMsg) {
            console.log(errMsg.toString())
        }
    });
}

控制器从MySQL，

中删除行

@DeleteMapping(value = "/users/{id}/delete")
    @ResponseStatus(value = HttpStatus.OK)
    public String deleteUser(@PathVariable("id") Long idx, final RedirectAttributes redirectAttributes) {

        logger.debug("Delete user with Id {}", idx);

        redirectAttributes.addFlashAttribute("css", "Success");
        redirectAttributes.addFlashAttribute("msg", "The user is deleted");

        // delete the user
        userService.delete(idx);
        return "redirect:/users/";
    }

我建议使用@ResponseStatus(value = HttpStatus.OK)，因为我从控制器返回302，并在Chrome开发工具的网络部分进行了验证。

单击按钮后，Spring启动删除数据库条目

1 个答案: