java - jQuery+Spring 从数据库中删除

Question

我有一个使用 Spring 的项目，我需要使用 jQuery 创建管理页面。我有一个包含所有用户的表，并且有一个“删除”按钮。当我单击它时，用户应该从数据库中删除。如果没有脚本，一切正常，但使用脚本，我无法弄清楚如何使用户从数据库中删除以及如何将用户登录发送到 Controller 。我只能从表中删除行，但是当我刷新页面时，用户仍然存在。谁能帮助我如何在脚本中从数据库中删除用户？

表

<table id="userBase" class="data" border="1" width="100%" cellpadding="2" cellspacing="4">
    <tr>
        <th>Login</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Birthday</th>
        <th>Role</th>
        <th>Actions</th>
    </tr>
    <c:forEach items="${userList}" var="user">
        <tr>
            <td>${user.login}</td>
            <td>${user.firstname}</td>
            <td>${user.lastname}</td>
            <td>${user.birthday}</td>
            <td><c:if test="${user.roleid==1}">Admin</c:if>
                <c:if test="${user.roleid==2}">User</c:if></td>
            <td><a href="edit/${user.login}">Edit   </a>
                <a class="confirm" href="delete/${user.login}">Delete</a></td>
        </tr>
    </c:forEach>
</table>

没有脚本的 Controller (现在已注释，但工作正常)

@RequestMapping("/delete/{userLogin}")
public String deleteUser(@PathVariable("userLogin") String userLogin) {
    userService.remove(userService.findByLogin(userLogin));
    return "redirect:/welcome";
}          

脚本 Controller

@Controller
public class SpringController {

@Autowired
private UserService userService;

@RequestMapping(value = "/delete/{userLogin}", method = RequestMethod.POST)
@ResponseBody
public boolean updateUser(@RequestParam("userLogin") String userLogin) {
    userService.remove(userService.findByLogin(userLogin));
    return true;
}
}

脚本

<script>
$(document).ready(function() {
        $("#userBase .confirm").on("click",function() {
            var conBox = confirm("Are you sure ?");
            if(conBox){
                var tr = $(this).closest('tr');
                tr.css("background-color","#000000");
                tr.fadeIn(1000).fadeOut(200, function(){
                tr.remove();
            });
            } else {
                $(this).dialog("close");
            }
        });
    });
</script>

Answer 1

这对我有用:

表格(选中“删除”链接)

<table id="userBase" class="data" border="1" width="100%" cellpadding="2" cellspacing="4">
    <tr>
        <th>Login</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Birthday</th>
        <th>Role</th>
        <th>Actions</th>
    </tr>
    <c:forEach items="${userList}" var="user">
        <tr>
            <td>${user.login}</td>
            <td>${user.firstname}</td>
            <td>${user.lastname}</td>
            <td>${user.birthday}</td>
            <td><c:if test="${user.roleid==1}">Admin</c:if>
                <c:if test="${user.roleid==2}">User</c:if></td>
            <td><a href="edit/${user.login}">Edit   </a>
                <a href="${pageContext.request.contextPath}/delete/${user.login}.json">Delete</a>
        </tr>
    </c:forEach>
</table>

Controller

@RequestMapping(value="/delete/{userLogin}", method=RequestMethod.DELETE,
        produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public void deleteUser(@PathVariable String userLogin) {
    userService.remove(userService.findByLogin(userLogin));
}

脚本

<script>
$(document).ready(function() {
    var deleteLink = $("a:contains('Delete')");
    $(deleteLink).click(function(event) {
        var conBox = confirm("Are you sure ?");
        if(conBox){
        $.ajax({
            url: $(event.target).attr("href"),
            type: "DELETE",

            beforeSend: function(xhr) {
                xhr.setRequestHeader("Accept", "application/json");
                xhr.setRequestHeader("Content-Type", "application/json");
            },

            success: function() {
                var tr = $(event.target).closest("tr");
                tr.css("background-color","#000000");
                tr.fadeIn(1000).fadeOut(200, function(){
                tr.remove();})
            }
        });
        } else {
            event.preventDefault();
        }
        event.preventDefault();
    });
});
</script>