jQuery+Spring 从数据库中删除

Question

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

表格

<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>

没有脚本的控制器（现在已经注释了，但效果很好）

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

脚本控制器

@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>

控制器

@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>

Answer 2

在您的代码中，您没有调用所需的 url 来调用将删除用户的处理程序方法。我假设您想使用 ajax 来执行此操作？如果您可以添加标记，也会有所帮助。

你能做的是（现在因为你的问题和你的代码看起来很模糊）

$(document).ready(function() {
        $("#userBase .confirm").on("click",function() {
            var conBox = confirm("Are you sure ?");
            var userLogin = "sampleOnly" //maybe somewhere in your html you have this
            var url  = "mycontroller/delete/"+userLogin //A rough guess for now
            if(conBox){

                $.post(url+userLogin,function(e){
                  var tr = $(this).closest('tr');
                  tr.css("background-color","#000000");
                   tr.fadeIn(1000).fadeOut(200, function(){
                  tr.remove();
               })

            });
            } else {
                $(this).dialog("close");
            }
        });
    });

Answer 3

如果你想使用jQuery 发送数据，我建议使用AJAX 和REST。这是我的做法：

@RequestMapping(value="delete.json", method=RequestMethod.DELETE, produces="application/json")
@ResponseBody
public Boolean deleteAjaxMultiple(@RequestBody String[] gotten)
{
    for (String login : gotten)
        userService.remove(userService.findByLogin(login));
    return true;
}

此控制器处理JSON 请求，在本例中为logins 数组。然后你只需要像这样从JavaScript 调用它：

$.ajax({
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    url: '/delete.json', //or whatever url works for you
    type: 'DELETE',
    data: JSON.stringify(arr), //arr is an array of logins you want to delete
    success: function(data) {
        location.reload(true); //or do whatever you want on success
    }               
});

您需要为此设置Jackson。有关详细信息，请参阅 this 和 this。